/* ===== DESIGN SYSTEM - AUTO-GENERATED ===== */
/* Do not edit this file directly. Edit files in src/css/ instead */
/* ===== src/css/00-variables.css ===== */
/* ================================================================
00-VARIABLES.CSS
================================================================
PROPÓSITO:
Define todas as variáveis CSS (Design Tokens) do sistema.
Este é o arquivo central que contém a paleta de cores, tipografia,
espaçamentos, sombras, bordas e demais tokens visuais.
CONTEÚDO:
- Paleta de cores da marca (brand-50 até brand-900)
- Cores de destaque (amarelo, vermelho, laranja, azul)
- Cores neutras (backgrounds, surfaces, borders, textos)
- Sistema de sombras (shadow-xs até shadow-2xl)
- Border radius (radius-xm até radius-lg)
- Alturas de inputs (input-height-sm até input-height-xl)
- Tamanhos de fonte (font-size-xxs até font-size-4xl)
- Gradientes especiais (grad-beta, grad-menu)
IMPORTÂNCIA:
Este arquivo deve ser o primeiro a ser carregado no build,
pois todos os outros arquivos CSS dependem destas variáveis.
================================================================ */
:root {
/* Fonte */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
/* Brand (base) */
--brand-50: #E6F7ED;
--brand-100: #C2EBCF;
--brand-200: #9BDEAF;
--brand-250: #74D18E;
--brand-300: #4DC46D;
--brand-400: #26B74D;
--brand-500: #00923F;
--brand-600: #007A35;
--brand-700: #00622B;
--brand-800: #004A21;
--brand-900: #003217;
/* Cores de Destaque Especial */
--accent-yellow: #f4c332;
/* Amarelo (original) */
--accent-yellow-light: #fef3c7;
--accent-yellow-dark: #d4a017;
--accent-red: #dc4545;
/* Vermelho */
--accent-red-light: #fee2e2;
--accent-red-dark: #b91c1c;
--accent-orange: #e97a2b;
/* Laranja */
--accent-orange-light: #ffedd5;
--accent-orange-dark: #c45a10;
--accent-blue: #3b82c4;
/* Azul */
--accent-blue-light: #dbeafe;
--accent-blue-dark: #1e5a8a;
/* Neutros */
--bg: #F7FAF8;
--surface: #FFFFFF;
--surface-2: #F2F6F3;
--surface-3: #E8EDE9;
--surface-4: #DCE3DE;
--border: #E3EEE7;
--text: #0F172A;
--text-2: #334155;
--muted: #64748B;
--inactive: #6b7280;
/* Shadows */
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
--shadow-md: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 3px 1px -2px rgba(0, 0, 0, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.08);
--shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
--shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Shadow para estados */
--shadow-hover: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 5px 5px -2px rgba(0, 0, 0, 0.08), 0 5px 10px 0 rgba(0, 0, 0, 0.15);
--shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.3);
--shadow-none: none;
--radius-xm: 6px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--focus: var(--brand-500);
/* variáveis de altura de inputs in px */
--input-height-sm: 30px;
--input-height-md: 35px;
--input-height-lg: 40px;
/* tamanho padrão */
--input-height-xl: 45px;
/* variáveis de tamanhos de fontes para inputs in px */
--input-font-sm: 11px;
/* tamanho padrão */
--input-font-md: 12px;
--input-font-lg: 14px;
--input-font-xl: 16px;
/* Tamanhos de fontes gerais */
--font-size-xxs: 9px;
/* extra extra small */
--font-size-xs: 10px;
/* extra small */
--font-size-sm: 11px;
/* small */
--font-size-md: 12px;
/* medium */
--font-size-lg: 13px;
/* large */
--font-size-xl: 14px;
/* extra large */
--font-size-2xl: 15px;
/* 2x large */
--font-size-3xl: 16px;
/* 3x large */
--font-size-4xl: 18px;
/* 4x large */
/* Gradientes de destaque */
--grad-beta: linear-gradient(90deg, #667eea, #764ba2, #f64f59, #c471ed, #667eea);
--grad-menu: linear-gradient(90deg, #004A21, #00923F, #004A21);
}
/* ===== src/css/01-reset.css ===== */
/* ================================================================
01-RESET.CSS
================================================================
PROPÓSITO:
Normaliza e reseta estilos padrão dos navegadores para garantir
consistência visual entre diferentes browsers. Define estilos base
para elementos HTML fundamentais.
CONTEÚDO:
- Reset do box-model (box-sizing: border-box)
- Configuração de html e body (altura total, scroll suave)
- Reset de listas (remoção de bullets e estilos)
- Reset de links (remoção de underline, cores consistentes)
- Estados de foco (acessibilidade)
- Configuração de fonte base e antialiasing
IMPORTÂNCIA:
Este arquivo deve ser carregado logo após as variáveis,
pois estabelece a base neutra sobre a qual os demais
componentes serão construídos.
================================================================ */
/* HTML element - smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Universal selector - box model */
* {
box-sizing: border-box;
}
/* HTML and Body - full height */
html,
body {
height: 100%;
}
/* Body - main document styles */
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-lg);
font-weight: normal;
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Focus states - accessibility */
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
/* Lists - reset default styles */
li, ul {
text-decoration: none;
list-style-type: none;
}
/* Links - comprehensive reset for all states */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
text-decoration: none;
color: inherit;
outline: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Links - focus visible state */
a:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* ===== src/css/02-layout.css ===== */
/* ================================================================
02-LAYOUT.CSS
================================================================
PROPÓSITO:
Define estruturas de layout macro da aplicação, incluindo
header principal, sistemas de navegação e grids de página.
CONTEÚDO:
- Header principal (.main-header) com gradiente verde
- Container de página (.page) com max-width e centralização
- Menu superior (.topbar) para navegação primária
- Menu secundário (.secondary) para navegação de contexto
- Grids utilitários (.grid, .row) para layouts flexíveis
USO:
Use estas classes para estruturar páginas inteiras.
Para componentes individuais, veja 03-components.css
================================================================ */
.main-header {
background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-500) 100%);
padding: 24px 20px;
box-shadow: 0 4px 12px rgba(0, 146, 63, 0.15);
margin-bottom: 0;
}
.main-header__container {
max-width: 1160px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 20px;
}
.main-header__logo {
height: 45px;
width: auto;
object-fit: contain;
}
.main-header__title {
font-size: 24px;
font-weight: 800;
color: white;
margin: 0;
letter-spacing: -0.02em;
}
.page {
max-width: 1160px;
margin: 0 auto;
padding: 20px 14px 40px;
display: grid;
gap: 16px;
}
/* ===== Navigation Menus ===== */
.topbar {
background: var(--brand-500);
color: #fff;
border-radius: 16px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.topbar__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 10px;
}
.topbar a {
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 13px;
padding: 10px 12px;
border-radius: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.topbar a:hover {
background: rgba(255, 255, 255, 0.14);
}
.topbar a[aria-current="page"] {
background: rgba(0, 0, 0, 0.14);
}
.secondary {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow-sm);
padding: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.secondary a {
color: var(--text-2);
text-decoration: none;
font-weight: 700;
font-size: 13px;
padding: 10px 12px;
border-radius: 14px;
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
}
.secondary a:hover {
background: var(--surface-2);
color: var(--text);
}
.secondary a[aria-current="page"] {
background: var(--brand-50);
color: var(--brand-800);
border: 1px solid rgba(0, 146, 63, 0.18);
}
/* ===== Utility Classes ===== */
.grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 16px;
}
.row {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
/* ===== src/css/03-components.css ===== */
/* ================================================================
03-COMPONENTS.CSS
================================================================
PROPÓSITO:
Componentes reutilizáveis e blocos de UI que formam a
biblioteca de componentes do design system.
CONTEÚDO:
- Cards (.card, .demo-card) para containers de conteúdo
- Swatches (.swatches, .swatch) para sistema de cores
- Chips (.chip) para badges pequenos
- Tab Items (.tab-item, .modern-tabs-container) para navegação
- Componentes de busca (search-bar, select2)
- Pills (.pill) para tags e labels
RESPONSIVIDADE:
Inclui breakpoints para tablet (768px) e mobile (480px)
================================================================ */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow-sm);
overflow: hidden;
scroll-margin-top: 2rem;
}
.card__hd {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 14px 14px 10px;
border-bottom: 1px solid var(--border);
}
.card__title {
margin: 0;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text);
}
.card__sub {
margin: 0;
font-size: 12px;
color: var(--muted);
}
.card__bd {
padding: 14px;
}
.demo-card {
border-radius: 8px;
background-color: white;
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
height: 128px;
padding: 16px;
box-shadow: rgb(174 182 190 / 35%) 0px 4px 5px;
transition: 0.15s;
border: 1px solid var(--border);
}
.demo-card:hover:not(.fixed-card) {
box-shadow: rgba(149, 157, 165, 0.6) 0px 4px 16px;
transform: translateY(-2px);
cursor: pointer;
}
.demo-card h3 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.demo-card p {
margin: 0;
font-size: 13px;
color: var(--text-2);
}
/* ===== Swatches (Color System) ===== */
.swatches {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.swatch {
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
background: #fff;
}
.swatch__color {
height: 64px;
}
.swatch__meta {
padding: 10px;
display: grid;
gap: 4px;
}
.swatch__name {
font-size: 12px;
font-weight: 800;
color: var(--text);
display: flex;
justify-content: space-between;
gap: 8px;
align-items: flex-start;
}
.swatch__hex {
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.chip {
font-size: 8px;
font-weight: normal;
text-transform: uppercase;
padding: 2px;
border-radius: 5px;
border: 1px solid rgba(15, 23, 42, 0.1);
background: rgba(15, 23, 42, 0.04);
color: var(--text);
white-space: nowrap;
}
/* ===== Tab Items (submenu estilo tabs) ===== */
/* ===== Tab Items (submenu estilo tabs) ===== */
.modern-tabs-container {
display: flex;
gap: 0.5rem;
padding: 0.5rem;
background: var(--surface-2);
border-radius: 12px;
margin-bottom: 1rem;
overflow-x: auto;
flex-wrap: wrap;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
/* Scrollbar personalizado para Webkit */
.modern-tabs-container::-webkit-scrollbar {
height: 6px;
}
.modern-tabs-container::-webkit-scrollbar-track {
background: transparent;
}
.modern-tabs-container::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
.modern-tabs-container::-webkit-scrollbar-thumb:hover {
background: var(--muted);
}
.tab-item {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 8px;
font-weight: 500;
font-size: var(--font-size-lg);
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none !important;
position: relative;
background: transparent;
white-space: nowrap;
flex-shrink: 0;
}
.modern-tabs-container a.tab-item {
color: var(--inactive);
}
.modern-tabs-container a.tab-item:hover {
background: var(--surface-3);
color: var(--text);
}
.modern-tabs-container a.tab-item.active {
background: white;
color: var(--brand-500);
box-shadow: var(--shadow-md);
}
/* Ícones SVG dentro dos tabs */
.tab-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* ===== RESPONSIVIDADE ===== */
/* Tablets e telas médias (até 768px) */
@media (max-width: 768px) {
.modern-tabs-container {
gap: 0.375rem;
padding: 0.375rem;
border-radius: 10px;
justify-content: space-around;
}
.tab-item {
padding: 10px 18px;
font-size: var(--font-size-md);
gap: 6px;
}
.tab-item svg {
width: 14px;
height: 14px;
}
}
/* Mobile (até 480px) */
@media (max-width: 480px) {
.modern-tabs-container {
gap: 0.25rem;
padding: 0.25rem;
border-radius: 8px;
margin-bottom: 0.75rem;
}
.tab-item {
padding: 8px 12px;
font-size: var(--font-size-sm);
gap: 4px;
border-radius: 6px;
}
.tab-item svg {
width: 12px;
height: 12px;
}
/* Opcional: Ocultar texto e mostrar apenas ícones em telas muito pequenas */
.tab-item.icon-only span {
display: none;
}
.tab-item.icon-only {
padding: 8px;
justify-content: center;
}
}
/* Modo de quebra de linha (alternativa ao scroll) */
.modern-tabs-container.wrap-mode {
flex-wrap: wrap;
overflow-x: visible;
}
/* Modo compacto (sem ícones) */
.modern-tabs-container.compact .tab-item svg {
display: none;
}
.modern-tabs-container.compact .tab-item {
padding: 8px 16px;
}
/* ===== Search Components ===== */
/* Select2 Dropdown Styles */
.select2-results__options--nested>li:hover {
background-color: #3b82f6;
color: var(--surface);
}
.select2-results__option--group {
padding: 8px;
border-bottom: 1px solid var(--border);
display: contents;
}
.select2-results__group {
display: block;
padding: 8px;
text-transform: uppercase;
color: var(--muted);
background-color: var(--surface-3);
font-weight: bold;
}
.select2-results__option--selectable {
padding: 12px;
cursor: pointer;
padding-left: 23px;
color: var(--text-2);
position: relative;
}
.select2-results__option--selectable:hover {
background-color: var(--surface-2);
}
/* Search Results Dropdown */
#paginas-exibicao__linha__input__resultado_topo {
text-align: left;
}
#paginas-exibicao__linha__input__resultado {
display: flex;
flex-direction: column;
position: absolute;
background-color: var(--surface);
z-index: 999;
width: 100%;
top: 2px;
box-shadow: var(--shadow-lg);
max-height: 200px;
overflow-y: auto;
}
/* Custom Scrollbar for Search Results */
#paginas-exibicao__linha__input__resultado::-webkit-scrollbar {
width: 12px;
}
#paginas-exibicao__linha__input__resultado::-webkit-scrollbar-thumb {
background-color: var(--muted);
border-radius: var(--radius-xm);
}
#paginas-exibicao__linha__input__resultado::-webkit-scrollbar-track {
background-color: var(--surface-2);
}
/* Advanced Search Bar Component */
#busca_aprimorada_busca_ajax {
display: none;
}
#busca_aprimorada_busca_ajax:focus {
outline: none;
}
.search-btn,
.input-search {
font: var(--font-size-3xl) var(--font-sans);
line-height: 1.5em;
}
.input-search {
color: var(--text);
}
.search-bar {
display: flex;
}
.search-bar .input-search,
.search-btn,
.search-btn:before,
.search-btn:after {
transition: all 0.25s ease-out;
}
.search-bar .input-search,
.search-btn {
width: 2em;
height: 2em;
}
.search-bar .input-search:invalid:not(:focus),
.search-btn {
cursor: pointer;
}
.search-bar,
.search-bar .input-search:focus,
.search-bar .input-search:valid {
width: 400px;
}
.search-bar .input-search:focus,
.search-bar .input-search:not(:focus)+.search-btn:focus {
outline: transparent;
}
.search-bar {
margin: auto;
justify-content: flex-start;
max-width: 400px;
}
.search-bar .input-search {
background: transparent;
border-radius: 1.5em;
border: 1px solid var(--accent-yellow);
box-shadow: 0 0 0 0.2em var(--accent-yellow) inset;
font-size: var(--font-size-lg);
padding: 0.75em;
transform: translate(0.4em, 0.49em) scale(0.37);
transform-origin: 100% 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search-bar .input-search::-webkit-search-decoration {
-webkit-appearance: none;
}
.search-bar .input-search:focus,
.search-bar .input-search:valid {
background: var(--surface);
border-radius: 0.375em 0 0 0.375em;
box-shadow: none;
transform: scale(1);
margin-left: 0px !important;
}
.search-btn {
background: var(--accent-yellow);
border-radius: 0 0.75em 0.75em 0 / 0 1.5em 1.5em 0;
padding: 0.75em;
position: relative;
transform: translate(0.25em, 0.05em) rotate(45deg) scale(0.25, 0.125);
transform-origin: 0 50%;
border: none;
}
.search-btn:before,
.search-btn:after {
content: "";
display: block;
opacity: 1;
position: absolute;
}
.search-btn:before {
border-radius: 50%;
box-shadow: 0 0 0 0.2em var(--surface-2) inset;
top: 0.35em;
left: 0.35em;
width: 1em;
height: 1em;
}
.search-btn:after {
background: var(--surface-2);
border-radius: 0 0.25em 0.25em 0;
top: 51%;
left: 46%;
width: 0.65em;
height: 0.25em;
transform: translate(0.2em, 0) rotate(45deg);
transform-origin: 0 50%;
}
.search-btn span {
display: inline-block;
overflow: hidden;
width: 1px;
height: 1px;
}
/* Search Bar Active States */
.search-bar .input-search:focus+.search-btn,
.search-bar .input-search:valid+.search-btn {
background: var(--accent-yellow);
border-radius: 0 0.375em 0.375em 0;
transform: scale(1);
margin-left: 0px;
}
.search-bar .input-search:focus+.search-btn:before,
.search-bar .input-search:focus+.search-btn:after,
.search-bar .input-search:valid+.search-btn:before,
.search-bar .input-search:valid+.search-btn:after {
opacity: 1;
}
.search-bar .input-search:focus+.search-btn:hover,
.search-bar .input-search:valid+.search-btn:hover,
.search-bar .input-search:valid:not(:focus)+.search-btn:focus {
background: var(--brand-600);
}
.search-bar .input-search:focus+.search-btn:active,
.search-bar .input-search:valid+.search-btn:active {
transform: translateY(1px);
}
/* Search Bar Dark Mode Support */
@media screen and (prefers-color-scheme: dark) {
.input-search {
color: var(--surface-2);
}
.search-bar .input-search {
box-shadow: 0 0 0 0.4em var(--surface-2) inset;
}
.search-bar .input-search:focus,
.search-bar .input-search:valid {
background: var(--text-2);
box-shadow: 0 0 0 0.1em var(--text-2) inset;
}
.search-btn {
background: var(--surface-2);
}
}
/* ===== Color Pairs (bg + text combinations) ===== */
.pairs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.pair {
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}
.pair__preview {
padding: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.pair__preview strong {
font-size: 14px;
letter-spacing: -0.01em;
}
.pair__preview span {
font-size: 12px;
opacity: 0.9;
}
.pair__meta {
padding: 10px 14px 12px;
background: #fff;
border-top: 1px solid var(--border);
display: flex;
gap: 10px;
flex-wrap: wrap;
color: var(--muted);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.pair__meta code {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 2px 8px;
color: var(--text-2);
}
/* ===== Badges & Highlights ===== */
@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes pulse-badge {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.85;
transform: scale(0.98);
}
}
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(0, 146, 63, 0.18);
background: var(--brand-50);
color: #16a367;
font-weight: 700;
font-size: 12px;
}
.menu-destaque-demo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 12px;
border-radius: 14px;
color: #fff;
background: var(--grad-menu);
background-size: 200% 100%;
animation: gradientShift 8s ease-in-out infinite;
box-shadow: 0 10px 20px rgba(22, 101, 52, 0.18);
}
.menu-destaque-demo strong {
font-size: 13px;
font-weight: 800;
}
.menu-destaque-demo span {
font-size: 12px;
opacity: 0.95;
font-weight: 600;
}
/* ===== Status Section ===== */
.status-section {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid #f1f1f1;
}
/* ===== Page Title ===== */
.page-title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text);
margin: 0 0 1rem 0;
}
.page-title span {
color: var(--brand-500);
}
/* ===== src/css/04-buttons.css ===== */
/* ================================================================
04-BUTTONS.CSS
================================================================
PROPÓSITO:
Define todos os estilos de botões e elementos de ação
da interface, incluindo variantes, tamanhos e estados.
CONTEÚDO:
- Botão base (.btn) com estilo primário verde
- Variantes (.btn--ghost, .btn--primary, .btn--danger, etc)
- Tamanhos (.btn--sm, .btn--md, .btn--lg)
- Action buttons (.action-btn) para tabelas e cards
- Grupos de botões (.btn-group)
- Estados (hover, active, disabled)
ACESSIBILIDADE:
Todos os botões incluem estados de foco visíveis
e cursor apropriado para disabled.
================================================================ */
.btn {
appearance: none;
border: 1px solid rgba(0, 146, 63, 0.28);
background: var(--brand-500);
color: #fff;
font-weight: 800;
font-size: var(--input-font-md);
padding: 10px 12px;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: all 0.2s ease;
font-family: var(--font-sans);
}
.btn:hover {
background: var(--brand-600);
transform: translateY(-1px);
}
.btn:active {
background: var(--brand-700);
transform: translateY(0);
}
.btn--ghost {
background: transparent;
color: var(--brand-800);
border: 1px solid rgba(0, 146, 63, 0.22);
}
.btn--ghost:hover {
background: var(--brand-50);
}
/* ===== Action Buttons ===== */
.acao-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
align-items: center;
opacity: 1;
}
.action-btn {
padding: 6px 12px;
border-radius: 8px;
border: 1px solid #e2e8f0;
background: white;
color: #64748b;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
font-family: var(--font-sans);
}
.action-btn:hover {
background: #f8fafc;
color: #1e293b;
border-color: #cbd5e1;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.action-btn.add {
color: #059669;
border-color: #d1fae5;
background: #f0fdf4;
}
.action-btn.add:hover {
background: #dcfce7;
border-color: #059669;
}
.action-btn.remove {
color: #dc2626;
border-color: #fecaca;
background: #fef2f2;
}
.action-btn.remove:hover {
background: #fee2e2;
border-color: #dc2626;
}
/* ===== Button Sizes ===== */
.btn--sm {
padding: 6px 10px;
font-size: 12px;
}
.btn--md {
padding: 10px 12px;
font-size: 13px;
}
.btn--lg {
padding: 14px 16px;
font-size: 14px;
}
/* ===== Button Variants ===== */
.btn--primary {
background: var(--brand-500);
border: 1px solid rgba(0, 146, 63, 0.28);
color: #fff;
}
.btn--primary:hover {
background: var(--brand-600);
}
.btn--secondary {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-2);
}
.btn--secondary:hover {
background: var(--surface);
}
.btn--danger {
background: #dc2626;
border: 1px solid rgba(220, 38, 38, 0.28);
color: #fff;
}
.btn--danger:hover {
background: #b91c1c;
}
.btn--success {
background: #059669;
border: 1px solid rgba(5, 150, 105, 0.28);
color: #fff;
}
.btn--success:hover {
background: #047857;
}
/* ===== Button States ===== */
.btn:disabled,
.btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.btn:disabled:hover,
.btn[disabled]:hover {
background: var(--brand-500);
transform: none;
}
/* ===== Button Groups ===== */
.btn-group {
display: flex;
gap: 0;
}
.btn-group .btn {
border-radius: 0;
margin: 0;
}
.btn-group .btn:first-child {
border-radius: 8px 0 0 8px;
}
.btn-group .btn:last-child {
border-radius: 0 8px 8px 0;
}
.btn-group .btn:not(:first-child) {
border-left: none;
}
/* ===== Footer Note ===== */
.footer-note {
font-size: 12px;
color: var(--muted);
padding: 2px 2px 0;
}
/* ===== src/css/05-forms.css ===== */
/* ================================================================
05-FORMS.CSS
================================================================
PROPÓSITO:
Estilos para todos os elementos de formulário da aplicação,
garantindo consistência visual e acessibilidade em inputs,
selects, textareas e elementos relacionados.
CONTEÚDO:
- Inputs de texto (text, email, password, number, date, etc)
- Selects com dropdown customizado
- Textareas com resize vertical
- Estados (focus, hover, disabled, invalid, valid)
- Labels e mensagens de erro
- Checkboxes e radio buttons
- Form groups e form layouts
ACESSIBILIDADE:
Todos os campos incluem estados de foco bem definidos
com borda verde (var(--brand-500)) e outline removido.
================================================================ */
/* Base font family for all form elements */
input,
select,
textarea {
font-family: var(--font-sans);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
textarea,
select {
width: 100%;
height: 40px;
padding: 0px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font-size: var(--input-font-sm);
font-weight: 500;
transition: all 0.2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="numeric"]:focus,
textarea:focus,
select:focus {
border-color: var(--brand-500);
outline: none;
border: 2px solid var(--brand-500);
}
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="search"]:disabled,
textarea:disabled,
select:disabled {
background: var(--surface-2);
color: var(--muted);
cursor: not-allowed;
}
/* hover state */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
border-color: var(--brand-300);
border-width: 1px;
}
/* Textarea specific styles */
textarea {
resize: vertical;
min-height: 100px;
}
/* Select specific styles */
select {
cursor: pointer;
appearance: none;
/* Remove default browser styling */
-webkit-appearance: none;
/* Safari/Chrome */
-moz-appearance: none;
/* Firefox */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23004A21' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
/* ===== Form Groups ===== */
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.form-group label {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.form-group .help-text {
font-size: 12px;
color: var(--muted);
}
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
border-color: #dc2626;
}
.form-group.error .help-text {
color: #dc2626;
}
/* ===== Input Variants ===== */
input[type="text"].input--lg,
input[type="email"].input--lg,
input[type="password"].input--lg,
input[type="number"].input--lg {
padding: 14px 16px;
font-size: 16px;
}
input[type="text"].input--sm,
input[type="email"].input--sm,
input[type="password"].input--sm,
input[type="number"].input--sm {
padding: 6px 10px;
font-size: 13px;
}
/* ===== Checkbox & Radio ===== */
input[type="checkbox"],
input[type="radio"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--brand-500);
}
.checkbox-group,
.radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.checkbox-group label,
.radio-group label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
/* ===== Search Input ===== */
.search-container {
position: relative;
width: 100%;
}
.search-container input[type="search"] {
padding-left: 36px;
}
/* .search-container::before {
content: "🔍";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
pointer-events: none;
} */
/* ===== Modern Config Inputs ===== */
.input-modern {
display: flex;
flex-direction: column;
gap: 6px;
}
.input-modern label {
font-size: 13px;
font-weight: 600;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.input-modern input,
.input-modern select,
.input-modern textarea {
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
background: var(--surface);
color: var(--text);
font-size: 13px;
}
.input-modern input:focus,
.input-modern select:focus,
.input-modern textarea:focus {
border-color: var(--brand-500);
outline: none;
border: 2px solid var(--brand-500);
}
/* ===== src/css/06-tables.css ===== */
/* ================================================================
06-TABLES.CSS
================================================================
PROPÓSITO:
Estilos para tabelas modernas e responsivas, incluindo
status badges e elementos de tabela relacionados.
CONTEÚDO:
- Tabela moderna (.modern-table) com bordas e hover
- Status badges (.status-badge) para classificação visual
- Variantes de status (success, warning, error, pending, info)
- Table header (.table-header) com título e ações
- Zebra striping para linhas alternadas
USO:
Use .modern-table para tabelas de dados.
Status badges podem ser usados dentro ou fora de tabelas.
================================================================ */
table.modern-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
table.modern-table th {
background: var(--surface-2);
border: 1px solid var(--border);
padding: 12px;
text-align: left;
font-weight: 700;
color: var(--text);
}
table.modern-table td {
border: 1px solid var(--border);
padding: 12px;
color: var(--text-2);
}
table.modern-table tbody tr:hover {
background: var(--surface-2);
}
table.modern-table tbody tr:nth-child(even) {
background: rgba(247, 250, 248, 0.5);
}
/* ===== Status Badges (for tables) ===== */
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
width: fit-content;
}
.status-badge.status--success {
background: #dcfce7;
color: #166534;
border: 1px solid #bbf7d0;
}
.status-badge.status--warning {
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
}
.status-badge.status--error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
}
.status-badge.status--pending {
background: #f3e8ff;
color: #6b21a8;
border: 1px solid #e9d5ff;
}
.status-badge.status--info {
background: #dbeafe;
color: #1e40af;
border: 1px solid #bfdbfe;
}
/* ===== Table Header ===== */
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
gap: 16px;
}
.table-header h3 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.table-actions {
display: flex;
gap: 8px;
}
/* ===== Modern Table ===== */
.table-modern {
border-collapse: collapse;
width: 100%;
font-size: 13px;
}
.table-modern thead {
background: var(--surface-2);
border-bottom: 2px solid var(--border);
}
.table-modern th {
padding: 14px;
text-align: left;
font-weight: 700;
color: var(--text);
}
.table-modern td {
padding: 14px;
border-bottom: 1px solid var(--border);
color: var(--text-2);
}
.table-modern tbody tr:hover {
background: rgba(0, 146, 63, 0.02);
}
/* ===== src/css/07-typography.css ===== */
/* ================================================================
07-TYPOGRAPHY.CSS
================================================================
PROPÓSITO:
Sistema tipográfico completo incluindo estilos para headings,
parágrafos, links, listas e elementos de texto formatado.
CONTEÚDO:
- Headings (h1-h4) com tamanhos responsivos usando clamp()
- Parágrafos com line-height otimizado
- Links com cor da marca e hover underline
- Listas (ul, ol) com espaçamento adequado
- Blockquotes com borda esquerda verde
- Code blocks inline com background e border
- Classes utilitárias (.lead, .meta, .kicker)
HIERARQUIA:
h1: 26-36px | h2: 20-28px | h3: 18px | h4: 15px
================================================================ */
.typography {
font-family: var(--font-sans);
color: var(--text);
line-height: 1.55;
}
.typography h1,
.typography h2,
.typography h3,
.typography h4 {
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 0.5em 0;
}
.typography h1 {
font-size: clamp(26px, 2.4vw, 36px);
font-weight: 800;
}
.typography h2 {
font-size: clamp(20px, 2vw, 28px);
font-weight: 800;
}
.typography h3 {
font-size: 18px;
font-weight: 800;
}
.typography h4 {
font-size: 15px;
font-weight: 700;
}
.typography p {
margin: 0 0 1em 0;
color: var(--text-2);
}
.typography .lead {
font-size: 16px;
color: var(--text-2);
}
.typography .meta {
font-size: 12px;
color: var(--muted);
}
.typography .kicker {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-700);
margin-bottom: 6px;
}
.typography a {
color: var(--brand-700);
font-weight: 700;
text-decoration: none;
}
.typography a:hover {
text-decoration: underline;
}
.typography ul,
.typography ol {
margin: 0 0 1em 0;
padding-left: 20px;
color: var(--text-2);
}
.typography li {
margin-bottom: 0.5em;
}
.typography blockquote {
margin: 1.5em 0;
padding-left: 1.5em;
border-left: 4px solid var(--brand-500);
color: var(--text-2);
font-style: italic;
}
.typography code {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 6px;
font-family: "Monaco", "Courier New", monospace;
font-size: 12px;
color: #e11d48;
}
.typography pre {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
overflow-x: auto;
margin: 1em 0;
}
.typography pre code {
background: none;
border: none;
padding: 0;
color: var(--text);
}
/* ===== Type Samples ===== */
.type-samples {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.type-box {
border: 1px solid var(--border);
border-radius: 16px;
padding: 14px;
background: var(--surface);
}
.type-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: baseline;
padding: 10px 0;
border-top: 1px solid var(--border);
}
.type-row:first-child {
border-top: 0;
padding-top: 0;
}
.type-spec {
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
/* ===== Text Utilities ===== */
.text--bold {
font-weight: 700;
}
.text--italic {
font-style: italic;
}
.text--underline {
text-decoration: underline;
}
.text--muted {
color: var(--muted);
}
.text--small {
font-size: 12px;
}
.text--large {
font-size: 16px;
}
.text--center {
text-align: center;
}
.text--right {
text-align: right;
}
.text--left {
text-align: left;
}
.text--justify {
text-align: justify;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.truncate--2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ===== src/css/08-alerts.css ===== */
/* ================================================================
08-ALERTS.CSS
================================================================
PROPÓSITO:
Customização de bibliotecas de alertas e modais para
adequação ao design system, especialmente SweetAlert2.
CONTEÚDO:
- Customização SweetAlert2 (cores, bordas, animações)
- Estilos para botões de confirm, deny e cancel
- Animações de entrada (slideUp)
- Ícones personalizados (success, warning, error, info)
- Ajustes de tipografia e espaçamento
DEPENDÊNCIAS:
Requer SweetAlert2 library (CDN ou npm)
https://sweetalert2.github.io/
================================================================ */
.swal2-container {
font-family: var(--font-sans);
}
.swal2-popup {
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
background: var(--surface);
}
.swal2-popup.swal2-show {
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.swal2-title {
color: var(--text);
font-weight: 800;
font-size: 18px;
letter-spacing: -0.01em;
}
.swal2-html-container {
color: var(--text-2);
font-size: 14px;
line-height: 1.6;
}
.swal2-confirm,
.swal2-deny,
.swal2-cancel {
font-family: var(--font-sans);
border-radius: 8px;
font-weight: 700;
font-size: 14px;
padding: 10px 16px;
}
.swal2-confirm {
background: var(--brand-500);
border: 1px solid rgba(0, 146, 63, 0.28);
color: #fff;
}
.swal2-confirm:hover {
background: var(--brand-600);
}
.swal2-confirm:focus {
border: 2px solid var(--brand-500);
}
.swal2-deny {
background: #f3e8ff;
border: 1px solid #e9d5ff;
color: #6b21a8;
}
.swal2-deny:hover {
background: #e9d5ff;
}
.swal2-cancel {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-2);
}
.swal2-cancel:hover {
background: var(--border);
}
.swal2-icon {
border-color: var(--brand-500);
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
background: var(--brand-500);
}
.swal2-icon.swal2-success .swal2-success-ring {
border-color: var(--brand-500);
}
.swal2-icon.swal2-warning {
border-color: #f59e0b;
color: #f59e0b;
}
.swal2-icon.swal2-error {
border-color: #dc2626;
color: #dc2626;
}
.swal2-icon.swal2-info {
border-color: #3b82f6;
color: #3b82f6;
}
/* ===== Alert/Notification Boxes ===== */
.alert {
padding: 14px;
border-radius: 8px;
border-left: 4px solid transparent;
margin-bottom: 16px;
font-size: 14px;
}
.alert strong {
font-weight: 700;
display: block;
margin-bottom: 4px;
}
.alert p {
margin: 0;
color: currentColor;
}
.alert--success {
background: #dcfce7;
border-left-color: #059669;
color: #166534;
}
.alert--warning {
background: #fef3c7;
border-left-color: #f59e0b;
color: #92400e;
}
.alert--error {
background: #fee2e2;
border-left-color: #dc2626;
color: #991b1b;
}
.alert--info {
background: #dbeafe;
border-left-color: #3b82f6;
color: #1e40af;
}
/* ===== Inline Messages ===== */
.message {
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid transparent;
}
.message--success {
background: #dcfce7;
color: #166534;
border: 1px solid #bbf7d0;
}
.message--warning {
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
}
.message--error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
}
.message--info {
background: #dbeafe;
color: #1e40af;
border: 1px solid #bfdbfe;
}
/* ===== Toast Notifications ===== */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-md);
z-index: 9999;
animation: slideInRight 0.3s ease-out;
max-width: 400px;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toast--success {
background: #dcfce7;
border-color: #bbf7d0;
color: #166534;
}
.toast--error {
background: #fee2e2;
border-color: #fecaca;
color: #991b1b;
}
.toast--info {
background: #dbeafe;
border-color: #bfdbfe;
color: #1e40af;
}
/* ===== src/css/09-animations.css ===== */
/* ================================================================
09-ANIMATIONS.CSS
================================================================
PROPÓSITO:
Define animações, transições e efeitos visuais reutilizáveis
para criar uma experiência interativa e fluida.
CONTEÚDO:
- Sistema de tabs (.tabs-navigation, .tab-button, .tab-content)
- Animações keyframes (fadeIn, slideIn, etc)
- Variáveis de transição (--transition-fast, base, slow)
- Efeitos hover (.hover-lift, .hover-shadow, .hover-scale)
- Estados de entrada/saída para conteúdo dinâmico
PERFORMANCE:
Todas as animações usam propriedades otimizadas
(transform, opacity) para melhor performance.
================================================================ */
.tabs-navigation {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
background: white;
padding: 0.5rem;
border-radius: 16px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
}
.tab-button {
flex: 1;
padding: 1rem 1.5rem;
border: none;
background: transparent;
color: #6b7280;
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
border-radius: 12px;
transition: all 0.3s ease;
font-family: var(--font-sans);
text-align: center;
}
.tab-button:hover {
background: var(--surface-2);
color: var(--text);
}
.tab-button.active {
background: var(--brand-500);
color: white;
box-shadow: 0 4px 12px rgba(0, 146, 63, 0.3);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== General Transitions ===== */
* {
--transition-fast: all 0.1s ease;
--transition-base: all 0.2s ease;
--transition-slow: all 0.3s ease;
}
.transition-fast {
transition: var(--transition-fast);
}
.transition-base {
transition: var(--transition-base);
}
.transition-slow {
transition: var(--transition-slow);
}
/* ===== Hover Effects ===== */
.hover-lift {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.hover-shadow {
transition: box-shadow 0.2s ease;
}
.hover-shadow:hover {
box-shadow: var(--shadow-md);
}
.hover-scale {
transition: transform 0.2s ease;
}
.hover-scale:hover {
transform: scale(1.02);
}
/* ===== Spin Animation ===== */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 2s linear infinite;
}
/* ===== Pulse Animation ===== */
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* ===== Bounce Animation ===== */
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.animate-bounce {
animation: bounce 2s infinite;
}
/* ===== Component Animation Visibility ===== */
.slide-exit {
animation: slideExit 0.2s ease-out forwards;
}
@keyframes slideExit {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(10px);
}
}
.slide--onboarding--active {
opacity: 1;
pointer-events: all;
animation: slideEnter 0.2s ease-out forwards;
}
@keyframes slideEnter {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== Step Indicator Dots ===== */
.step-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--border);
cursor: pointer;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.step-dot:hover {
background: var(--brand-250);
}
.step-dot--active {
background: var(--brand-500);
border-color: var(--brand-500);
box-shadow: 0 0 0 4px rgba(0, 146, 63, 0.2);
}
/* ===== Loading States ===== */
.loading {
opacity: 0.6;
pointer-events: none;
}
.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid var(--border);
border-top-color: var(--brand-500);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.spinner-busca {
animation: spin 1s infinite linear;
}
/* ===== Opacity Transitions ===== */
.fade-in {
animation: fadeIn 0.3s ease-in;
}
.fade-out {
animation: fadeOut 0.3s ease-out forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* ===== src/css/10-responsive.css ===== */
/* ================================================================
10-RESPONSIVE.CSS
================================================================
PROPÓSITO:
Media queries e ajustes responsivos para garantir que a
interface funcione perfeitamente em todos os tamanhos de tela.
CONTEÚDO:
- Breakpoint Tablet (max-width: 768px)
- Breakpoint Mobile (max-width: 680px e 480px)
- Ajustes de layout (grids, flexbox)
- Redimensionamento de tipografia
- Adaptação de navegação e menus
- Otimizações de espaçamento
BREAKPOINTS:
Desktop: > 768px | Tablet: ≤ 768px | Mobile: ≤ 480px
ABORDAGEM:
Mobile-first com ajustes progressivos para telas maiores.
================================================================ */
@media (max-width: 768px) {
.main-header {
padding: 16px 14px;
}
.main-header__container {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.main-header__logo {
height: 36px;
}
.main-header__title {
font-size: 18px;
}
.grid {
grid-template-columns: 1fr;
}
.page {
padding: 16px 12px 32px;
}
.tabs-navigation {
gap: 0.25rem;
}
.tab-button {
padding: 0.875rem 1.25rem;
font-size: 0.8125rem;
}
.swatches {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pairs {
grid-template-columns: 1fr;
}
table {
font-size: 12px;
}
.table-header {
flex-direction: column;
align-items: flex-start;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
textarea,
select {
font-size: var(--input-font-sm);
}
/* Search Bar Responsive - Tablet */
.search-btn:before,
.search-btn:after {
opacity: 1;
}
}
/* ===== Mobile (680px and down) ===== */
@media (max-width: 680px) {
.swatches {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.type-row {
grid-template-columns: 1fr;
gap: 4px;
}
.type-spec {
text-align: left;
}
.tab-items {
gap: 6px;
}
.tab-item {
padding: 12px;
font-size: var(--font-size-md);
}
.btn-group {
flex-direction: column;
}
.btn-group .btn {
border-radius: 14px;
}
.btn-group .btn:not(:first-child) {
border-left: 1px solid rgba(0, 146, 63, 0.28);
}
.toast {
left: 12px;
right: 12px;
bottom: 12px;
max-width: none;
}
.search-container {
width: 100%;
}
.typography h1 {
font-size: clamp(20px, 2vw, 24px);
}
.typography h2 {
font-size: clamp(16px, 1.8vw, 20px);
}
.page-title {
font-size: clamp(18px, 2vw, 24px);
}
/* ===== Ajustes Mobile - Imóvel Listar ===== */
.placa_item {
font-weight: bold;
}
.imovel-menu-topo a {
margin: 5px 5px;
width: calc(50% - 10px);
font-size: 100%;
height: 36px;
}
.imovel-menu-topo p {
float: left;
padding: 0px 0px;
margin: 9px 0;
width: 100%;
}
.imovel-menu-topo li:nth-child(1) {
padding-right: 0;
}
.imovel_cp span {
font-size: var(--font-size-xl);
font-weight: bold;
}
.imovel-menu-topo {
padding: 0;
margin: 0px;
display: none;
}
.imovel_cp {
width: 100% !important;
}
.imovel_cp input[type=text],
.imovel_cp input[type=tel] {
font-size: var(--font-size-3xl);
height: 40px;
color: var(--text);
font-family: var(--font-sans);
border: solid 1px var(--border);
width: 100%;
background-color: var(--surface);
border-radius: var(--radius-sm);
padding-left: 5px;
}
.imovel_cp select {
font-size: var(--font-size-3xl);
height: 40px;
}
.imovel-menu-topo {
padding: 5px;
}
.sp_space {
display: none;
}
.btnSalvarImovel {
width: 100%;
}
.btnPropNovo {
display: inline-block;
}
.imovel-menu-topo li:nth-child(2) {
padding-right: 0px;
}
.imovel-menu-topo .placa_item,
.filtros_btn .placa_item {
color: var(--text-2);
font-size: 20px;
position: relative;
text-transform: capitalize;
}
.placa_btn {
border: 1px solid var(--border);
width: 100%;
padding: 10px;
text-align: left;
background-color: var(--surface-2);
margin-bottom: 10px;
overflow: hidden;
}
.filtros_btn.placa_btn i {
color: var(--text-2);
font-size: 1em;
}
.filtros {
padding: 0px;
}
#imolistar_rapidamente,
#imovel-listar-form-busca,
#imovel-box-navegacao,
#cliente-box-navegacao,
#box-vidaimovel,
#box-vidacliente {
display: none;
}
ul.navegacao {
background-color: var(--surface);
}
.ImoveisListarCx>.ImoLisMenu1Cx,
.ImoveisListarCx>.ImoLisResumo {
height: unset;
min-height: 150px;
}
.ImoList-AcoesImovel {
height: unset !important;
padding-left: 0px !important;
}
.icones-listar-fa {
padding: 14px;
background-color: var(--surface-4);
text-align: center;
border-radius: 50%;
height: 50px;
width: 50px;
font-size: 22px !important;
margin: 3px;
}
.ImoLisMenu1Cx span {
font-size: var(--font-size-xl);
display: inline-block;
height: unset;
padding: 0px 0px;
background: unset;
width: 100%;
}
.ImoLisMenu1Cx span a {
display: block;
padding: 8px 0px;
}
.ImoLisMenu1Cx span:hover {
background: unset !important;
}
.ImoveisListarCx>.ImoLisResumo span {
font-size: var(--font-size-xl);
height: unset !important;
width: 100%;
display: inline-flex;
}
.ImoveisListarCx>.ImoLisResumo span a {
padding: 7px 0px;
line-height: unset;
width: 100%;
}
}
/* ===== Small Mobile (480px and down) ===== */
@media (max-width: 480px) {
.main-header {
padding: 12px 10px;
}
.main-header__title {
font-size: 16px;
}
.page {
padding: 12px 10px 24px;
gap: 12px;
}
.card {
border-radius: 12px;
}
.card__hd {
padding: 12px 12px 8px;
}
.card__bd {
padding: 12px;
}
.swatches {
grid-template-columns: 1fr;
gap: 8px;
}
.swatch__color {
height: 48px;
}
.swatch__meta {
padding: 8px;
}
.topbar__row {
padding: 8px;
gap: 4px;
}
.topbar a {
padding: 8px 10px;
font-size: 12px;
}
.secondary {
padding: 8px;
gap: 6px;
}
.secondary a {
padding: 8px 10px;
font-size: 12px;
}
.btn {
padding: 8px 10px;
font-size: 12px;
}
.btn--lg {
padding: 10px 12px;
font-size: 13px;
}
.action-btn {
padding: 5px 10px;
font-size: 11px;
}
.demo-card {
height: auto;
gap: 10px;
}
.demo-card h3 {
font-size: 14px;
}
.demo-card p {
font-size: 12px;
}
.table-modern {
font-size: 12px;
}
.table-modern th,
.table-modern td {
padding: 10px;
}
.status-badge {
padding: 4px 8px;
font-size: 11px;
}
.alert {
padding: 10px;
font-size: 12px;
}
.form-group {
gap: 6px;
margin-bottom: 12px;
}
.form-group label {
font-size: 13px;
}
input[type="checkbox"],
input[type="radio"] {
width: 16px;
height: 16px;
}
.pill {
padding: 6px 8px;
font-size: 11px;
}
.typography h1 {
font-size: 18px;
}
.typography h2 {
font-size: 16px;
}
.typography h3 {
font-size: 14px;
}
.typography p {
font-size: 13px;
}
.page-title {
font-size: 18px;
}
.acao-actions {
flex-direction: column;
width: 100%;
}
.action-btn {
width: 100%;
justify-content: center;
}
}
/* ===== Large Desktop (1440px and up) ===== */
@media (min-width: 1440px) {
.page {
padding: 24px 20px 48px;
}
.card {
border-radius: 18px;
}
.swatches {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.main-header {
padding: 28px 24px;
}
}
/* ===== Print Styles ===== */
@media print {
.topbar,
.secondary,
.main-header,
.acao-actions,
.action-btn,
.no-print {
display: none !important;
}
body {
background: white;
}
.card {
page-break-inside: avoid;
border: 1px solid #ccc;
box-shadow: none;
}
a {
color: var(--brand-700);
}
table {
border-collapse: collapse;
width: 100%;
}
table td,
table th {
border: 1px solid #ddd;
padding: 8px;
}
}
/* ===== src/css/11-grid-system.css ===== */
/* ================================================================
11-GRID-SYSTEM.CSS
================================================================
PROPÓSITO:
Sistema de grid responsivo baseado no rwdgrid framework
para criação de layouts flexíveis e adaptáveis.
CONTEÚDO:
- Sistema de 12 colunas (.grid-1 até .grid-12)
- Container (.container) com max-width adaptável
- Breakpoints: 720px, 1024px, 1200px
- Helper classes (push, pull, clear-grid)
- Offsets e alinhamentos
CRÉDITOS:
rwdgrid v2.0 by Vineeth G S
https://github.com/gsvineeth/rwdgrid/
USO:
================================================================ */
/*********************************************************************************************
1. Base code
*********************************************************************************************/
*, *:after, *:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='grid-'] {
float: left;
padding: 0px 10px;
outline: 0px solid red;
width: 100%;
border: 0px solid white;
margin: 5px 0;
}
.clear-grid {
clear: both;
float: inherit;
}
.container {
margin: 0%;
width: 100%;
}
.container:after, .container:before {
display: table;
clear: both;
content: " ";
}
.nest {
margin: 0 -10px;
padding: 0;
width: auto;
}
/*********************************************************************************************
2. Mobile Grid
*********************************************************************************************/
.grid-m-12 {
width: 100%;
}
.grid-m-11 {
width: 91.666663%;
}
.grid-m-10 {
width: 83.33%;
}
.grid-m-9 {
width: 74.999997%;
}
.grid-m-8 {
width: 66.66666664%;
}
.grid-m-7 {
width: 58.333%;
}
.grid-m-6 {
width: 50%;
}
.grid-m-5 {
width: 41.6665%;
}
.grid-m-4 {
width: 33.33%;
}
.grid-m-3 {
width: 24.99%;
}
.grid-m-2 {
width: 16.66666%;
}
.grid-m-1 {
width: 8.33%;
}
/*********************************************************************************************
3. Grid 720px+
*********************************************************************************************/
@media (min-width: 720px) {
.grid-12 {
width: 100%;
}
.grid-11 {
width: 91.666663%;
}
.grid-10 {
width: 83.33%;
}
.grid-9 {
width: 74.999997%;
}
.grid-8 {
width: 66.66666664%;
}
.grid-7 {
width: 58.333%;
}
.grid-6 {
width: 50%;
}
.grid-5 {
width: 41.6665%;
}
.grid-4 {
width: 33.33%;
}
.grid-3 {
width: 24.99%;
}
.grid-2 {
width: 16.66666%;
}
.grid-1 {
width: 8.33%;
}
.grid-t-12 {
width: 100%;
}
.grid-t-11 {
width: 91.666663%;
}
.grid-t-10 {
width: 83.33%;
}
.grid-t-9 {
width: 74.999997%;
}
.grid-t-8 {
width: 66.66666664%;
}
.grid-t-7 {
width: 58.333%;
}
.grid-t-6 {
width: 50%;
}
.grid-t-5 {
width: 41.6665%;
}
.grid-t-4 {
width: 33.33%;
}
.grid-t-3 {
width: 24.99%;
}
.grid-t-2 {
width: 16.66666%;
}
.grid-t-1 {
width: 8.33%;
}
}
/*********************************************************************************************
4. Grid 1024px+
*********************************************************************************************/
@media only screen and (min-width: 1024px) {
.grid-tl-12 {
width: 100%;
}
.grid-tl-11 {
width: 91.666663%;
}
.grid-tl-10 {
width: 83.33%;
}
.grid-tl-9 {
width: 74.999997%;
}
.grid-tl-8 {
width: 66.66666664%;
}
.grid-tl-7 {
width: 58.333%;
}
.grid-tl-6 {
width: 50%;
}
.grid-tl-5 {
width: 41.6665%;
}
.grid-tl-4 {
width: 33.33%;
}
.grid-tl-3 {
width: 24.99%;
}
.grid-tl-2 {
width: 16.66666%;
}
.grid-tl-1 {
width: 8.33%;
}
}
/*********************************************************************************************
5. Grid 1200px+
*********************************************************************************************/
@media only screen and (min-width: 1200px) {
.container {
max-width: 1400px;
margin: 0 auto;
}
.container-fluid {
max-width: 90%;
margin: 0 5%;
}
.grid-d-12 {
width: 100%;
}
.grid-d-11 {
width: 91.666663%;
}
.grid-d-10 {
width: 83.33%;
}
.grid-d-9 {
width: 74.999997%;
}
.grid-d-8 {
width: 66.66666664%;
}
.grid-d-7 {
width: 58.333%;
}
.grid-d-6 {
width: 50%;
}
.grid-d-5 {
width: 41.6665%;
}
.grid-d-4 {
width: 33.33%;
}
.grid-d-3 {
width: 24.99%;
}
.grid-d-2 {
width: 16.66666%;
}
.grid-d-1 {
width: 8.33%;
}
}
/*********************************************************************************************
6. Helper classes
*********************************************************************************************/
img.scale, img.responsive {
max-width: 100%;
height: auto;
}
/* ===== src/css/11-helpers.css ===== */
/* ================================================================
11-HELPERS.CSS
================================================================
PROPÓSITO:
Classes utilitárias e helpers para uso geral na aplicação,
incluindo estados, visibilidade e ajustes específicos.
CONTEÚDO:
- Estados (.hidden, .active, .disabled)
- Validação (.invalid, .valid)
- Duplicatas de header e navegação (consolidação legacy)
- Utilitários específicos de busca
- Helpers de espaçamento e alinhamento
NOTA:
Este arquivo contém algumas duplicatas de 02-layout.css
que serão consolidadas em versões futuras.
================================================================ */
.hidden {
display: none !important;
}
.active {
opacity: 1 !important;
}
.disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.invalid {
border-color: var(--danger-600) !important;
color: var(--danger-600);
}
.valid {
border-color: var(--success-600) !important;
color: var(--success-600);
}
/* ===== Search-specific Utilities ===== */
.sub-menu li:last-child {
border-right: none;
}
.busca_aprimorada_li_botao {
border-right: none !important;
}
/* ===== Main Header ===== */
.main-header {
background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-500) 100%);
padding: 24px 20px;
box-shadow: 0 4px 12px rgba(0, 146, 63, 0.15);
margin-bottom: 0;
}
.main-header__container {
max-width: 1160px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 20px;
}
.main-header__logo {
height: 45px;
width: auto;
object-fit: contain;
}
.main-header__title {
font-size: 24px;
font-weight: 800;
color: white;
margin: 0;
letter-spacing: -0.02em;
}
.main-header {
padding: 16px 14px;
}
.main-header__container {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.main-header__logo {
height: 36px;
}
.main-header__title {
font-size: 18px;
}
.page {
max-width: 1160px;
margin: 0 auto;
padding: 20px 14px 40px;
display: grid;
gap: 16px;
}
.topbar {
background: var(--brand-500);
color: #fff;
border-radius: 16px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.topbar__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 10px;
}
.topbar a {
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 13px;
padding: 10px 12px;
border-radius: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.topbar a[aria-current="page"] {
background: rgba(0, 0, 0, .14);
}
.grid {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 16px;
}
.grid {
grid-template-columns: 1fr;
}
.card__hd {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 14px 14px 10px;
border-bottom: 1px solid var(--border);
}
.card__title {
margin: 0;
font-size: 14px;
font-weight: 800;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--text);
}
.card__sub {
margin: 0;
font-size: 12px;
color: var(--muted);
}
.card__bd {
padding: 14px;
}
@media (max-width: 680px) {
.swatches {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.pairs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.pairs {
grid-template-columns: 1fr;
}
.pair {
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}
.pair__preview {
padding: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.pair__preview strong {
font-size: 14px;
letter-spacing: -0.01em;
}
.pair__preview span {
font-size: 12px;
opacity: .9;
}
.pair__meta {
padding: 10px 14px 12px;
background: #fff;
border-top: 1px solid var(--border);
display: flex;
gap: 10px;
flex-wrap: wrap;
color: var(--muted);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.pair__meta code {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 2px 8px;
color: var(--text-2);
}
.btn--ghost {
background: transparent;
color: var(--brand-800);
border: 1px solid rgba(0, 146, 63, .22);
}
.btn--ghost:hover {
background: var(--brand-50);
}
.tabs-navigation {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
background: white;
padding: 0.5rem;
border-radius: 16px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
}
.tab-button.active {
background: var(--brand-500);
color: white;
box-shadow: 0 4px 12px rgba(0, 146, 63, 0.3);
}
.tab-content.active {
display: block;
}
.page-title {
font-size: clamp(24px, 3vw, 32px);
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text);
margin: 0 0 1rem 0;
}
.page-title span {
color: var(--brand-500);
}
.btn--highlight {
width: auto;
min-width: 200px;
height: 35px;
font-size: 14px;
line-height: 16px;
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px;
color: white;
text-decoration: none;
transition: 0.15s;
border: none;
cursor: pointer;
font-weight: 700;
box-shadow: 0 4px 12px rgba(0, 146, 63, 0.35);
padding: 0 1.5rem;
}
.btn--highlight:hover {
background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
box-shadow: 0 6px 16px rgba(0, 146, 63, 0.45);
transform: translateY(-1px);
}
.btn--highlight:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0, 146, 63, 0.3);
}
.btn--small {
padding: 6px 12px;
font-size: 12px;
height: auto;
min-width: auto;
}
.btn--large {
padding: 14px 24px;
font-size: 16px;
height: auto;
min-width: auto;
}
.btn--highlight:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.btn--loading {
position: relative;
color: transparent;
pointer-events: none;
}
.btn--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid #ffffff;
border-radius: 50%;
border-top-color: transparent;
animation: spinner 0.6s linear infinite;
}
.btn--destructive {
background: #dc2626;
border-color: #dc2626;
color: white;
}
.btn--destructive:hover {
background: #b91c1c;
}
.btn--destructive:active {
background: #991b1b;
}
.btn-icon {
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-icon svg {
width: 16px;
height: 16px;
}
.btn-icon.btn--small svg {
width: 14px;
height: 14px;
}
.btn-icon.btn--large svg {
width: 20px;
height: 20px;
}
.btn-group {
display: inline-flex;
gap: 0;
}
.btn-group .btn--ghost {
border-radius: 0;
margin: 0;
}
.btn-group .btn--ghost:first-child {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
}
.btn-group .btn--ghost:last-child {
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
}
.btn-group .btn--ghost+.btn {
border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.summary-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.5rem;
}
.summary-links a {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: white;
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-2);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
}
.summary-links a:hover {
background: var(--brand-50);
border-color: var(--brand-500);
color: var(--brand-700);
transform: translateX(4px);
}
.summary-links a::before {
content: '';
width: 4px;
height: 4px;
background: var(--brand-500);
border-radius: 50%;
flex-shrink: 0;
}
.btn-view-css {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: white;
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-2);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: var(--font-sans);
}
.btn-view-css:hover {
background: var(--brand-50);
border-color: var(--brand-500);
color: var(--brand-700);
}
.btn-view-css i {
width: 16px;
height: 16px;
}
.btn-copy-code {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background: #334155;
border: 1px solid #475569;
border-radius: 6px;
color: #e2e8f0;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
font-family: var(--font-sans);
}
.btn-copy-code:hover {
background: #475569;
border-color: #64748b;
}
.btn-copy-code.copied {
background: var(--brand-600);
border-color: var(--brand-500);
color: white;
}
.btn-copy-code i {
width: 14px;
height: 14px;
}
.btn_tutorial {
background-color: var(--muted);
color: var(--surface);
padding: 6px 12px;
font-weight: normal;
border: none;
border-radius: 8px;
margin-top: 5px;
cursor: pointer;
display: inline-block;
transition: 0.15s;
}
.btn_tutorial:hover {
opacity: 0.95;
scale: 1.015;
box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.2);
}
.bc-item.active {
font-weight: 500;
color: #1e1e1e;
}
.breadcrumb svg.active {
color: #1e1e1e;
}
.grid-card-paginas {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.grid-card-paginas {
grid-template-columns: 1fr;
}
@media (max-width: 425px) {
.card-paginas .top {
gap: 10px;
}
.card-paginas .icon {
height: 36px;
min-width: 36px;
max-width: 36px;
}
.titulo-pagina {
font-size: 14px;
}
.desc-pagina {
font-size: 11px;
}
}
.btn-fixed {
background-color: var(--brand-500);
padding: 4px 12px;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
transition: 0.15s;
color: #fff !important;
text-decoration: none;
border: none;
}
.btn-fixed:hover {
color: #fff;
background-color: var(--brand-600);
text-decoration: none;
}
@media screen and (max-width: 720px) {
.div-breadcrumb {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
@media screen and (max-width: 600px) {
.titulo_pagina,
.texto_descricao_pag {
width: 100%;
}
.icone_ficha {
display: none;
}
}
.onboarding-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
animation: fadeIn 0.3s ease;
}
.onboarding-overlay.active {
display: flex;
}
.onboarding-modal {
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.05),
0 10px 30px rgba(0, 0, 0, 0.15),
0 30px 60px rgba(0, 0, 0, 0.2),
0 50px 100px rgba(0, 0, 0, 0.25);
width: min(960px, 95vw);
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
}
.onboarding-header {
padding: 2rem 2rem 1.5rem 2rem;
border-bottom: 1px solid var(--border);
position: relative;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
backdrop-filter: blur(10px);
}
.onboarding-header>div:first-child {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.onboarding-header h2 {
margin: 0;
font-size: 26px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.5px;
background: linear-gradient(135deg, var(--text) 0%, var(--brand-700) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.onboarding-subtitle {
margin: 0 0 1rem 0;
font-size: 14px;
color: var(--text-2);
}
.progress-bar-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--border);
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--brand-500) 0%, var(--brand-600) 100%);
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 10px rgba(0, 146, 63, 0.5);
}
.step-indicator {
font-size: 12px;
color: var(--text-2);
font-weight: 600;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.step-indicator i {
width: 16px;
height: 16px;
color: var(--brand-600);
}
.btn-close-onboarding {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 32px;
height: 32px;
border: none;
background: var(--surface-2);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
color: var(--text-2);
}
.btn-close-onboarding:hover {
background: var(--border);
color: var(--text);
}
.onboarding-body {
padding: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
overflow-y: auto;
flex: 1;
}
.onboarding-text-column {
display: flex;
flex-direction: column;
justify-content: center;
}
.step-text {
transition: opacity 0.3s ease;
}
.step-text h3 {
margin: 0 0 1rem 0;
font-size: 20px;
font-weight: 700;
color: var(--text);
}
.step-text p {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--text-2);
}
.onboarding-preview-column {
position: relative;
}
.slide--onboarding {
position: absolute;
inset: 0;
opacity: 0;
transform: translateX(30px) scale(0.95);
pointer-events: none;
transition:
opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
will-change: transform, opacity;
}
.slide--onboarding--active {
opacity: 1;
transform: translateX(0) scale(1);
pointer-events: auto;
}
.slide--onboarding.slide-exit {
transform: translateX(-30px) scale(0.95);
opacity: 0;
}
.progress-bar {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 8px;
background: var(--surface-2);
border-radius: 4px;
overflow: hidden;
}
.slide--onboarding[data-step="3"] {
flex-direction: column;
}
.slide--onboarding[data-step="4"] {
flex-direction: row;
}
.onboarding-footer {
padding: 1.5rem 2rem;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
backdrop-filter: blur(10px);
}
.step-indicators {
display: flex;
gap: 8px;
align-items: center;
}
.step-dot {
width: 10px;
height: 10px;
background: var(--border);
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
position: relative;
}
.step-dot:hover {
background: var(--brand-300);
transform: scale(1.2);
}
.step-dot--active {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
width: 28px;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 146, 63, 0.4);
}
.step-dot--active::after {
content: '';
position: absolute;
inset: -3px;
border-radius: inherit;
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
opacity: 0.3;
animation: pulse 2s infinite;
}
.onboarding-buttons {
display: flex;
gap: 0.75rem;
}
.onboarding-buttons .btn {
box-shadow: 0 2px 8px rgba(0, 146, 63, 0.2);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.onboarding-buttons .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 146, 63, 0.3);
}
.onboarding-buttons .btn:active {
transform: translateY(0);
}
.onboarding-buttons .btn {
animation: none !important;
transition: none !important;
}
.step-dot--active::after {
animation: none !important;
}
.onboarding-body {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.onboarding-header h2 {
font-size: 20px;
}
.step-text h3 {
font-size: 18px;
}
.onboarding-modal {
max-height: 95vh;
}
.onboarding-footer {
padding: 1.5rem 1rem;
}
/* ===== src/css/12-missing-helpers.css ===== */
/* ================================================================
12-MISSING-HELPERS.CSS
================================================================
PROPÓSITO:
Classes auxiliares que complementam o sistema, preenchendo
lacunas e adicionando funcionalidades específicas.
CONTEÚDO:
- Component examples (.component-example)
- Swatches adicionais com hover effects
- Code blocks (.code-block, .css-code-block)
- Badges e pills extras
- Tooltips e popovers
- Status sections
RELAÇÃO:
Complementa 11-helpers.css com classes mais específicas
para a documentação do design system.
================================================================ */
.component-example {
margin-bottom: 2rem;
}
/* Swatches Grid */
.swatches {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.swatch {
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.swatch:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.swatch__color {
width: 100%;
height: 80px;
}
.swatch__info {
padding: 8px;
font-size: 11px;
background: var(--surface);
}
.swatch__name {
font-weight: 600;
margin-bottom: 2px;
}
.swatch__hex {
color: var(--muted);
font-family: monospace;
font-size: 10px;
}
/* Code Blocks */
.code-block {
background: var(--code-bg, #f5f5f5);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
margin: 1rem 0;
}
.code-block__header {
padding: 10px 15px;
background: var(--code-header-bg, #e8e8e8);
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.code-block__language {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
color: var(--muted);
}
.code-block__content {
padding: 15px;
overflow-x: auto;
font-size: 13px;
line-height: 1.5;
}
.code-block__content code {
font-family: 'Courier New', Courier, monospace;
color: var(--code-text, #333);
}
/* Tab Navigation */
.tab-button {
padding: 12px 16px;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
font-weight: 500;
color: var(--text-secondary);
transition: all 0.3s;
}
.tab-button.active {
border-bottom-color: var(--brand-600);
color: var(--brand-600);
}
/* Pairs / Item Previews */
.pair {
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--surface);
}
.pair__preview {
padding: 14px;
display: flex;
align-items: center;
justify-content: center;
background: var(--background);
min-height: 120px;
flex-grow: 1;
}
.pair__meta {
padding: 12px 14px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--muted);
}
/* Dynamic Components Container */
#dynamic-components-container {
padding: 20px 0;
}
.component-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin: 20px 0;
}
.component-item {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: var(--surface);
transition: box-shadow 0.3s, transform 0.3s;
}
.component-item:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
.component-preview {
padding: 20px;
background: var(--background);
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.component-actions {
padding: 12px;
border-top: 1px solid var(--border);
display: flex;
gap: 8px;
}
.component-css {
padding: 12px;
background: var(--code-bg, #f5f5f5);
border-top: 1px solid var(--border);
font-size: 12px;
overflow-x: auto;
}
.component-css.hidden {
display: none;
}
/* Intro Tutorial Elements */
.intro-help-circle {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--brand-600);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
box-shadow: 0 4px 12px rgba(0, 146, 63, 0.3);
transition: all 0.3s;
}
.intro-help-circle:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0, 146, 63, 0.4);
}
.intro-help-circle.hidden {
display: none;
}
.intro-help {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
padding: 24px;
max-width: 500px;
z-index: 1000;
}
.intro-help.hidden {
display: none;
}
/* Summary Links */
.summary-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.summary-links a {
display: inline-block;
padding: 6px 12px;
background: var(--brand-100);
color: var(--brand-600);
text-decoration: none;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
transition: all 0.3s;
}
.summary-links a:hover {
background: var(--brand-200);
text-decoration: underline;
}
/* ===== src/css/13-legacy-helpers.css ===== */
/* ================================================================
13-LEGACY-HELPERS.CSS
================================================================
PROPÓSITO:
Classes legacy adaptadas para o novo design system.
Mantém compatibilidade com código antigo enquanto
aplica os novos design tokens.
CONTEÚDO:
- Título de página (.titulo_pagina)
- Ícone de ficha (.icone_ficha)
- Descrição de página (.texto_descricao_pag)
- Breadcrumbs legacy (.div-breadcrumb)
- Overrides de fonte para elementos antigos
MIGRAÇÃO:
Este arquivo facilita a transição gradual do código
legacy para o novo design system.
================================================================ */
.configuracoes *,
.texto_descricao_pag *,
.div-breadcrumb * {
font-family: var(--font-sans);
}
/* ===== Page Title Section ===== */
.titulo_pagina {
display: flex;
margin-bottom: 16px;
padding: 16px 8px;
}
.icone_ficha {
width: 20%;
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: center;
}
.texto_descricao_pag {
width: 70%;
}
.icone_ficha img {
width: 120px;
height: 120px;
object-fit: contain;
}
/* ===== Description Text ===== */
.texto_descricao_pag h1 {
text-transform: uppercase;
border-bottom: 2px solid var(--border);
padding-bottom: 10px;
margin-bottom: 15px;
font-size: 24px;
font-weight: normal;
color: var(--text);
}
.texto_descricao_pag h1 span {
color: var(--brand-600);
font-weight: 600;
}
.texto_descricao_pag p {
margin-bottom: 10px;
color: var(--text);
font-size: 13px;
font-weight: 400;
}
/* ===== Buttons ===== */
.btn_tutorial {
background-color: var(--muted);
color: #FFF;
padding: 6px 12px;
font-weight: normal;
border: none;
border-radius: 8px;
margin-top: 5px;
cursor: pointer;
display: inline-block;
transition: 0.15s;
}
.btn_tutorial:hover {
opacity: 0.95;
scale: 1.015;
box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.2);
}
.titulo_placa {
background: white !important;
border-bottom: 1px solid var(--border);
padding: 8px 24px !important;
display: block !important;
margin: -10px -20px 10px -20px;
font-weight: normal;
color: var(--text-2);
}
/* ===== Breadcrumb Navigation ===== */
/* Breadcrumb styles moved to 15-breadcrumb.css */
.div-breadcrumb {
display: flex;
justify-content: space-between;
align-items: center;
}
/* ===== Fixed Buttons ===== */
.div-btns-fixed {
display: flex;
gap: 8px;
align-items: center;
}
.btn-fixed {
background-color: var(--brand-600);
padding: 4px 12px;
font-size: 12px;
cursor: pointer;
border-radius: 8px;
transition: 0.15s;
color: #fff !important;
text-decoration: none;
}
.btn-fixed:hover {
color: #fff;
background-color: var(--brand-700);
text-decoration: none;
}
/* ===== Responsive ===== */
@media screen and (max-width: 600px) {
.titulo_pagina,
.texto_descricao_pag {
width: 100%;
}
.icone_ficha {
display: none;
}
}
@media screen and (max-width: 720px) {
.div-breadcrumb {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* ===== src/css/14-config-imovel-listar.css ===== */
/* ================================================================
14-CONFIG-IMOVEL-LISTAR.CSS
================================================================
PROPÓSITO:
Estilos específicos para a página de listagem de imóveis,
incluindo cards de propriedade, filtros de busca e ações.
CONTEÚDO:
- Botão de ver negócios (.imolist_btnVerNegocios)
- Caixa de busca (.ilist_busca) com filtros
- Cards de imóvel (.imolist_card)
- Grid de listagem responsivo
- Badges de destaque e status
- Ações rápidas (editar, excluir, compartilhar)
- Paginação de resultados
CONTEXTO:
Página específica do módulo de imóveis do CRM.
Usa design tokens do sistema para consistência visual.
================================================================ */
.imolist_btnVerNegocios {
right: 44px;
top: 12px;
position: absolute;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--brand-400);
color: var(--surface);
opacity: 1;
cursor: pointer;
transition: 0.2s ease;
}
.imolist_btnVerNegocios:hover {
background-color: var(--brand-500);
transform: scale(1.1);
}
/* Search Box */
.ilist_busca {
width: 100%;
min-height: 130px;
float: left;
padding: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: ease 0.2s;
background: var(--surface);
}
.ilist_busca:hover {
border: 1px solid var(--text-2);
}
.ilist_busca>.ilCxBusca1 {
width: 100%;
}
.ilCxItens {
float: left;
width: 145px;
height: 40px;
margin-right: 10px;
margin-bottom: 6px;
}
.ilCxItens span,
.ilCxItens a {
display: block;
}
@media screen and (max-width: 768px) {
.ilCxItens {
width: calc(50% - 10px) !important;
}
}
.btn_desativado {
color: var(--muted);
border-color: var(--border);
cursor: not-allowed;
opacity: 0.5;
}
.mais_filtros {
text-align: center;
/* padding-top: 12px; */
}
#btn_pesquisar {
width: 100%;
height: 100%;
}
#btn_FiltroMaisItens {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
#btn_limpar_filtros {}
/* #btn_salva_buscas_desativado {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} */
.btn_upgrade_buscas {
background-color: var(--accent-yellow);
appearance: none;
background-color: var(--accent-yellow);
color: #fff;
font-weight: 800;
font-size: var(--input-font-sm);
padding: 10px 12px;
border-radius: 14px;
box-shadow: var(--shadow-sm);
}
#btn-salvar-filtro {}
/* Search & Clear Buttons Container */
.ilist_CxPesquisar {
width: 100px;
height: 130px;
float: left;
background-color: var(--surface-2);
border: 1px solid var(--border);
text-align: center;
transition: ease 0.2s;
}
.ilist_CxPesquisar:hover {
border: 1px solid var(--text-2);
}
.ilist_CxLimpar {
width: 100px;
height: 38px;
float: left;
background-color: var(--surface-2);
border: 1px solid var(--border);
border-top: 1px solid var(--surface-2);
text-align: center;
transition: ease 0.2s;
}
.ilist_CxLimpar a {
font-size: 11px;
text-align: center;
line-height: 38px;
color: var(--text);
font-family: var(--font-sans);
font-weight: normal;
}
.ilist_CxLimpar:hover {
border: 1px solid var(--text-2);
}
/* Input Size Classes */
.ilCxItensTam1 {
width: 136px;
}
.ilCxItensTam2 {
width: 155px;
}
.ilCxItensTam3 {
width: 190px;
}
/* Inactive Box State */
.imovelCaixaInativo {
opacity: 0.7;
transition: 0.2s ease;
}
.imovelCaixaInativo:hover {
opacity: 1;
}
/* Color Classes */
.azul2-bg {
background-color: var(--brand-600);
}
.azul2-cl {
color: var(--brand-600);
}
.azul {
color: var(--brand-600) !important;
}
/* Quick Edit Box */
.cxEdicaoRapida {
padding: 10px;
border-top: 1px solid var(--border);
position: relative;
width: 100%;
}
.cxERapItem1 {
float: left;
line-height: 20px;
margin-right: 10px;
}
.cxERapItem2 {
float: left;
width: 200px;
margin-right: 10px;
}
.cxERapItem3 {
float: left;
width: 20px;
margin-right: 20px;
}
.cxERapItem4 {
float: left;
line-height: 20px;
color: var(--brand-600);
display: none;
}
/* ===== Property List Container ===== */
.ImoveisListarCx {
width: 100%;
border: 1px solid var(--border);
position: relative;
margin-bottom: 20px;
font-family: var(--font-sans);
color: var(--text-2);
font-size: 12px;
/* overflow: hidden; */
transition: ease 0.2s;
border-radius: var(--radius-sm);
background-color: var(--surface);
}
.ImoveisListarCx:hover {
border: 1px solid var(--brand-700);
box-shadow: var(--shadow-md);
}
/* Image Section */
.ImoveisListarCx>.ImoLisImagem {
float: left;
width: 190px;
height: 99px;
border-right: 1px var(--border) solid;
margin-top: 16px;
margin-bottom: 16px;
margin-right: 15px;
padding-left: 16px;
position: relative;
}
.ImoveisListarCx>.ImoLisImagem img {
width: 155px;
height: 100px;
border: 0;
object-fit: cover;
}
.ImoveisListarCx>.ImoLisImagem>.ImoLisLegenda {
position: absolute;
max-width: 155px;
z-index: 5;
background: rgba(220, 53, 69, 0.8);
text-align: left;
font-size: 10px;
color: var(--surface);
padding: 2px 5px;
border-radius: 2px;
}
/* Description Section */
.ImoveisListarCx>.ImoLisDesc {
float: left;
width: 49%;
height: 172px;
line-height: 14px;
overflow: hidden;
display: flex;
align-content: center;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.ImoveisListarCx>.ImoLisDesc p {
display: unset;
height: unset;
margin-bottom: 5px;
margin-top: 5px;
}
.ImoLisDescText1 {
font-size: 11px;
line-height: 10px;
}
.ImoLisDescText2 {
line-height: 20px;
display: inline-block;
margin: 5px 0px;
}
.ImoLisDescText3 {
font-size: 14px;
line-height: 25px;
font-weight: 600;
}
/* Menu Container 1 */
.ImoveisListarCx>.ImoLisMenu1Cx {
float: left;
padding-top: 0px;
padding-left: 15px;
background-color: var(--surface-2);
display: flex;
align-items: center;
}
.ImoLisMenu1Cx span {
color: var(--text-2);
min-height: 20px;
line-height: 20px;
padding-left: 15px;
display: block;
font-size: 12px;
transition: 0.2s ease;
}
.ImoLisMenu1Cx span:hover {
color: var(--text);
}
.ImoLisMenu1Cx p {
display: table-cell;
height: 164px;
vertical-align: middle;
}
@media (max-width: 768px) {
.ImoveisListarCx>.ImoLisMenu1Cx {
margin: 0px;
padding: 0px;
}
}
.ImoLisMenu1off {
color: var(--muted) !important;
}
/* Resume/Summary Section */
.ImoveisListarCx>.ImoLisResumo {
float: left;
padding-left: 15px;
background-color: var(--surface-2);
border-left: 1px solid var(--border);
line-height: 15px;
font-size: 11px;
display: flex;
align-items: center;
}
.ImoveisListarCx>.ImoLisResumo p {
display: table-cell;
height: 172px;
vertical-align: middle;
margin-top: 34px;
}
.ImoveisListarCx>.ImoLisResumo span {
color: var(--text-2);
min-height: 20px;
line-height: 20px;
padding-left: 15px;
display: block;
font-size: 11px;
transition: 0.2s ease;
}
.ImoveisListarCx>.ImoLisResumo span a {
color: var(--text-2);
text-decoration: none;
}
.ImoveisListarCx>.ImoLisResumo span:hover {
color: var(--text);
}
/* Separator */
.ImoveisListarCx>.ImoLisSepara1 {
float: left;
width: 7px;
height: 172px;
display: none;
}
/* Menu Container 2 */
.ImoveisListarCx>.ImoLisMenu2Cx {
float: left;
padding-top: 4px;
display: flex;
flex-direction: column;
align-content: normal;
justify-content: center;
gap: 5px;
}
.ImoveisListarCx>.ImoLisMenu2Cx>.ImoLisMenu2 {
height: 30px;
line-height: 30px;
margin-left: 0px;
transition: 0.2s ease;
}
.ImoveisListarCx>.ImoLisMenu2Cx>.ImoLisMenu2 a {
font-family: var(--font-sans);
color: var(--text-2);
font-size: 12px;
padding-left: 15px;
text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
height: 100%;
}
.ImoveisListarCx>.ImoLisMenu2Cx>.ImoLisMenu2 a:hover {
color: var(--text);
font-weight: 600;
}
.ImoveisListarCx>.ImoLisMenu2Cx>.ImoLisMenu2ic1off {
font-family: var(--font-sans);
color: var(--muted);
font-size: 12px;
padding-left: 30px;
display: block;
}
.ImoveisListarCx>.ImoLisMenu2Cx>.ImoLisMenu2ic1 {
background: none;
}
.icone_menu_listar {
width: 24px;
height: 24px;
color: var(--brand-600);
}
.icone_desativar {
color: #dc2626;
width: 24px;
height: 24px;
}
.ImoLisAlterar {
transition: 0.2s ease;
}
/* ===== Property List - Dropdown Menu ===== */
.imoveis-listar_des {
font: 12px var(--font-sans);
line-height: 32px;
}
.imoveis-listar_des ul {
z-index: 100;
margin: 0;
padding: 0;
list-style-type: none;
}
.imoveis-listar_des ul li {
position: relative;
display: inline;
float: left;
}
.imoveis-listar_des ul li a {
display: block;
padding: 0px 5px;
border-right: 0px solid var(--surface-2);
color: var(--text);
text-decoration: none;
transition: 0.2s ease;
}
.imoveis-listar_des ul li a:link,
.imoveis-listar_des ul li a:visited {
color: var(--text);
}
.imoveis-listar_des ul li a.selected {
background: var(--surface-2);
color: var(--text);
}
.imoveis-listar_des ul li a:hover {
background: var(--surface-2);
color: var(--text);
}
.imoveis-listar_des ul li ul {
position: absolute;
left: 0;
display: none;
visibility: hidden;
color: var(--text);
background: var(--surface);
text-align: left;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.imoveis-listar_des ul li ul li {
display: list-item;
float: none;
color: var(--text);
background: var(--surface);
text-align: left;
}
.imoveis-listar_des ul li ul li ul {
top: 0;
}
.imoveis-listar_des ul li ul li a {
font: normal 12px var(--font-sans);
width: 180px;
padding: 5px;
margin: 0;
border-bottom: 1px solid var(--border);
}
/* ===== Menu Direction Item ===== */
.ImoLisMenuDirItem {
height: 20px;
line-height: 20px;
transition: 0.2s ease;
}
.ImoLisMenuDirItem:hover {
color: var(--text);
}
/* ===== Select Containers ===== */
.select2-container {
font-size: 11px;
font-family: var(--font-sans);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--text);
height: 100%;
display: flex;
align-items: center;
}
.select2-container--default .select2-selection--single {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
height: 40px;
}
.select2-container .select2-selection--single {
height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--text) transparent transparent transparent;
}
/* Selection Delete State */
.del_selecao {
opacity: 0.5;
box-shadow: var(--shadow-md);
}
/* ===== Form Fields ===== */
.campo {
color: var(--text);
font-family: var(--font-sans);
border: solid 1px var(--border);
height: 40px;
background-color: var(--surface);
border-radius: var(--radius-sm);
padding-left: 5px;
}
.campoCorP, select.campoCorP+.select2 .select2-selection--single {
color: var(--text);
border-color: var(--brand-700);
background-color: var(--surface-2);
}
.clear {
clear: both;
}
.ilCxItens select {
-moz-appearance: none;
-moz-border-end-color: var(--text);
}
/* NOTE: select element base styles consolidated at line ~1023 */
.campo select {
-moz-border-end-color: var(--text);
}
.campoCorP select {
-moz-border-end-color: var(--text);
}
/* Area Field */
.ilCx_caixaArea {
border: none;
height: 40px;
width: 100%;
border-radius: var(--radius-sm);
}
.campoArea {
height: 40px;
width: 48%;
padding: 0 8px;
box-sizing: border-box;
}
.campoArea2 {
height: 40px;
width: 49%;
padding: 0 8px;
box-sizing: border-box;
}
/* ===== Dropdown Button ===== */
.dropbtn {
width: 100%;
padding: 0px 0;
height: 40px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background-color: var(--surface);
cursor: pointer;
transition: 0.2s ease;
}
.dropbtn:hover {
border-color: var(--text-2);
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: var(--surface);
min-width: 170px;
box-shadow: var(--shadow-md);
z-index: 100;
font-size: 12px;
margin-top: 0px;
left: -20px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.dropdown-content a {
color: var(--text-2);
padding: 12px 0px 12px 20px;
text-decoration: none;
display: inline;
transition: 0.2s ease;
}
.dropdown-content a:hover {
font-weight: bold;
background-color: var(--surface-2);
}
.dropdown:hover .dropdown-content {
display: block;
background-color: var(--surface);
}
/* ===== Tooltip/Balloon ===== */
.tooltip-balao {
font-family: var(--font-sans);
display: none;
position: absolute;
right: 30px;
top: 0px;
width: 105px;
padding: 7px 12px;
text-align: center;
color: var(--surface);
box-shadow: 0px 0px 1px 1px var(--border);
border-radius: var(--radius-sm);
transition: opacity 0.7s;
font-size: 12px;
background-color: rgba(15, 23, 42, 0.9);
}
/* ===== Property Info Section ===== */
.imovel-info {
font-size: 12px;
line-height: 1;
text-align: left;
padding: 5px;
margin-bottom: 10px;
margin-top: 0;
word-spacing: 1px;
}
.imovel-info .imo-features {
margin-right: 5px;
margin-bottom: 5px;
padding: 4px 10px;
background-color: var(--surface-2);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
font-weight: normal;
display: inline-flex;
align-content: center;
justify-content: flex-start;
font-size: 11px;
}
.ImoList_Valor {
color: var(--brand-600);
font-weight: bold;
width: 100%;
display: inline-block;
font-size: 16px;
line-height: unset;
padding: 10px 0px;
}
.ImoList-AcoesImovel {
background: none !important;
padding: 0;
margin-top: 5px;
}
.ImoList-AcoesImovel svg {
color: var(--text);
width: 16px;
}
.ImoList-AcoesImovel svg:hover {
color: var(--brand-700);
}
.icones_acoes {
display: inline-block;
width: 24px;
text-align: center;
margin: 0px 2px;
}
.refCaixa {
font-size: 11px !important;
line-height: 10px;
border-radius: var(--radius-sm);
padding: 2.5px 8px;
background-color: var(--surface-2);
color: var(--text-2);
text-decoration: none !important;
font-weight: normal;
margin-right: 10px;
border: 1px solid var(--border);
}
/* ===== Responsive ===== */
@media only screen and (min-width: 0px) and (max-width: 989px) {
.ImoveisListarCx>.ImoLisDesc {
width: 25%;
}
}
@media only screen and (min-width: 990px) and (max-width: 1195px) {
.ImoveisListarCx>.ImoLisDesc {
width: 37%;
}
}
@media only screen and (min-width: 720px) and (max-width: 833px) {
.ImoveisListarCx>.ImoLisResumo {
display: none;
}
}
@media only screen and (max-width: 719px) {
.ImoveisListarCx {
min-width: unset;
display: flex;
flex-flow: row wrap;
}
.corpo .container {
min-width: unset;
}
.ImoveisListarCx>.ImoLisDesc {
width: 100%;
height: unset;
padding: 10px;
padding-top: 0px;
}
.ImoveisListarCx>.ImoLisMenu1Cx {
width: 50%;
}
.ImoveisListarCx>.ImoLisSepara1 {
display: none;
}
.ImoveisListarCx>.ImoLisResumo {
width: 50%;
display: inline;
}
.ImoveisListarCx>.ImoLisImagem {
width: 100%;
text-align: center;
border-right: none;
height: unset;
margin: 0;
padding: 10px;
}
.ImoveisListarCx>.ImoLisImagem img {
width: 100%;
height: unset;
}
.ImoveisListarCx>.ImoLisMenu2Cx {
width: 100%;
background-color: var(--surface);
}
.ImoveisListarCx>.ImoLisMenu2Cx>.ImoLisMenu2 {
height: max-content;
height: -webkit-max-content;
height: -moz-max-content;
line-height: unset;
margin-left: unset;
padding: unset;
width: 50%;
}
.ImoveisListarCx>.ImoLisMenu2Cx>.ImoLisMenu2 a {
padding: 15px;
padding-left: 30px;
}
.imovel-info {
padding: 5px 0px;
margin-bottom: 0px;
}
.ImoLisMenu1Cx span {
display: flex !important;
flex-wrap: wrap !important;
}
.ImoLisResumo {
align-items: center !important;
display: flex !important;
}
.ImoveisListarCx {
display: flex !important;
align-items: stretch !important;
}
.ImoList-AcoesImovel svg {
width: 18px;
}
.ImoList-AcoesImovel a {
display: block;
}
}
/* ===== src/css/15-breadcrumb.css ===== */
/* ================================================================
15-BREADCRUMB.CSS
================================================================
PROPÓSITO:
Componente de navegação breadcrumb para indicar a
localização do usuário na hierarquia do sistema.
CONTEÚDO:
- Container breadcrumb (.breadcrumb) com flexbox
- Itens de navegação (.bc-item) com links
- Separadores SVG entre itens
- Estado ativo (.active) para página atual
- Estados hover e focus
ACESSIBILIDADE:
Usa nav com aria-label apropriado e
indica visualmente a página atual.
USO:
================================================================ */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: var(--input-font-md);
}
/* Breadcrumb Item Links */
.breadcrumb .bc-item {
color: var(--text-2);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
padding: 4px 0;
border-radius: 4px;
}
.breadcrumb .bc-item:hover {
color: var(--text);
text-decoration: underline;
}
.breadcrumb .bc-item.active {
color: var(--text);
font-weight: 600;
cursor: default;
}
.breadcrumb .bc-item.active:hover {
text-decoration: none;
}
/* Breadcrumb Separator SVG */
.breadcrumb svg {
width: 20px;
height: 20px;
flex-shrink: 0;
fill: var(--text-2);
stroke: none;
transition: all 0.2s ease;
}
.breadcrumb svg path {
transition: all 0.2s ease;
}
.breadcrumb svg.active {
fill: var(--text);
}
.breadcrumb svg.active path {
fill: var(--text);
}
/* Responsive Breadcrumb */
@media screen and (max-width: 768px) {
.breadcrumb {
font-size: 12px;
gap: 6px;
}
.breadcrumb svg {
width: 18px;
height: 18px;
}
}
@media screen and (max-width: 480px) {
.breadcrumb {
font-size: 11px;
gap: 4px;
}
.breadcrumb svg {
width: 16px;
height: 16px;
}
}
/* ===== src/css/16-legacy-styles.css ===== */
/* ================================================================
16-LEGACY-STYLES.CSS
================================================================
PROPÓSITO:
Estilos legacy do sistema antigo adaptados para usar
os design tokens do novo sistema. Garante compatibilidade
retroativa durante o período de migração.
CONTEÚDO:
- Classes de fonte antigas (fonte_padrao, fonte_titulo, etc)
- Estilos de formulários legacy
- Layouts e containers antigos
- Tabelas e grids legados
- Elementos deprecados mas ainda em uso
NOTA IMPORTANTE:
Este arquivo contém código legacy que está sendo
gradualmente migrado para os novos componentes.
Evite adicionar novos estilos aqui.
MIGRAÇÃO:
Ao atualizar páginas antigas, substitua estas classes
pelas equivalentes nos arquivos 01-09.
================================================================ */
.placa {
font-family: var(--font-sans);
color: var(--brand-500);
font-size: 28px;
}
.fonte_padraom {
font-size: 11px;
color: var(--text);
font-family: var(--font-sans);
}
.fonte_padrao {
font-size: var(--font-size-md);
color: var(--text-2);
font-family: var(--font-sans);
font-weight: normal;
}
.fonte_padraocor {
font-size: 14px;
color: var(--brand-500);
font-family: var(--font-sans);
font-weight: normal;
}
.fonte_titulo {
font-size: 20px;
font-weight: bold;
color: var(--brand-500);
font-family: var(--font-sans);
}
.fonte_chamadat {
font-size: 11px;
font-weight: normal;
color: var(--brand-500);
font-family: var(--font-sans);
}
.fonte_rodape {
font-size: 13px;
color: var(--surface);
font-family: var(--font-sans);
}
.fonte_menutopo {
font-size: 15px;
color: var(--surface);
font-family: var(--font-sans);
}
#caixa_conteudo {
background-color: var(--surface-2);
border: 1px solid var(--border);
}
.riscado {
text-decoration: line-through;
}
.fonte_padrao10 {
font-size: 10px;
color: var(--text);
font-family: var(--font-sans);
font-weight: normal;
font-variant: normal;
}
.fonte_padrao9 {
font-size: 9px;
color: var(--text);
font-family: var(--font-sans);
}
.fonte_menu {
font-size: 10px;
color: var(--text);
font-weight: bold;
font-family: var(--font-sans);
}
.fonte_exemplo {
font-size: 9px;
color: var(--muted);
font-weight: normal;
font-family: var(--font-sans);
}
.fonte_itens {
font-size: 13px;
color: var(--brand-600);
font-weight: bold;
font-family: var(--font-sans);
}
.branconegrito {
color: var(--surface);
font-weight: bold;
font-family: var(--font-sans);
font-size: 12px;
}
.data {
color: var(--text);
font-family: var(--font-sans);
font-size: 11px;
border: solid 1px var(--border);
height: 30px;
width: 30px;
background-color: var(--surface);
}
.opacity4 {
opacity: 0.4;
}
/* NOTE: select element base styles consolidated at line ~1023 */
/* NOTE: @-moz-document is deprecated and removed - modern browsers support standard 'appearance' property */
.campo select,
.conteudo select {
-moz-appearance: none;
-moz-border-end-color: var(--text);
}
.maiusculo {
text-transform: uppercase;
}
.caixa {
color: var(--text);
font-family: var(--font-sans);
font-size: 11px;
border: solid 1px var(--border);
height: 80px;
width: 100%;
background-color: var(--surface);
border-radius: var(--radius-sm);
}
.caixaGrande {
color: var(--text);
font-family: var(--font-sans);
font-size: 11px;
border: solid 1px var(--border);
height: 250px;
width: 100%;
background-color: var(--surface);
border-radius: var(--radius-sm);
}
.caixaMenor {
color: var(--text);
font-family: var(--font-sans);
font-size: 11px;
border: solid 1px var(--border);
height: 40px;
width: 100%;
background-color: var(--surface);
border-radius: var(--radius-sm);
}
.vermelho {
color: var(--accent-red-dark) !important;
}
.azul {
color: var(--accent-blue-dark) !important;
}
.azul2-bg {
background-color: var(--accent-blue-light);
}
.ajudavn1 {
background: var(--brand-600);
color: var(--surface);
padding: 2px 6px;
font-weight: normal;
text-decoration: none;
font-family: var(--font-sans);
font-size: 10px;
}
.ajudavn2 {
background: var(--brand-500);
color: var(--surface);
padding: 2px 6px;
font-weight: normal;
font-family: var(--font-sans);
font-size: 10px;
text-decoration: none;
}
#tab_contorno {
background-color: var(--surface);
border: 1px solid var(--border);
}
#caixa {
position: fixed;
left: 0px;
top: 125px;
}
.clear {
clear: both;
}
/* ############# CAIXA FORMULARIO ################ */
#imovel_item,
.imovel_item {
margin-bottom: 25px;
padding: 20px;
margin-top: 10px;
border: solid 1px var(--border);
box-shadow: none;
width: 100%;
}
#imovel_item:hover,
.imovel_item:hover {
border: solid 1px var(--brand-600);
background-color: var(--bg);
}
#imovel_separa_item {
height: 10px;
}
.imovel_cp {
margin-right: 5px;
position: relative;
float: left;
margin-bottom: 10px;
max-width: 100%;
}
.imovel_cp span {
font-size: 12px;
color: var(--text);
font-family: var(--font-sans);
font-weight: normal;
}
.imovel_cp select {
color: var(--text);
font-family: var(--font-sans);
font-size: 11px;
border: solid 1px var(--border);
height: 30px;
width: 100%;
background-color: var(--surface);
border-radius: var(--radius-sm);
padding-left: 5px;
-moz-appearance: none;
-moz-border-end-color: var(--text);
}
.imovel_cp select:hover {
border-color: var(--brand-400);
-moz-border-end-color: var(--text);
background-color: var(--surface-2);
text-shadow: 0 0 black;
}
.imovel_cp input[type=text] {
color: var(--text);
font-family: var(--font-sans);
font-size: 11px;
border: solid 1px var(--border);
height: 30px;
width: 100%;
background-color: var(--surface);
border-radius: var(--radius-sm);
padding-left: 5px;
}
.imovel_cp input[type=text]:hover {
border-color: var(--brand-400);
background-color: var(--surface-2);
text-shadow: 0 0 black;
}
.placa_item {
font-family: var(--font-sans);
color: var(--text-2);
font-size: var(--font-size-4xl);
text-transform: uppercase;
}
.imovel_inserir_linha {
height: 1px;
background-color: var(--border);
margin-bottom: 13px;
}
/* ############# FORMULARIO EXTRA ################ */
.fcaixa_item {
position: relative;
padding: 12px;
margin-bottom: 10px;
margin-top: 10px;
border: solid 1px var(--surface);
width: 100%;
}
.fcaixa_item:hover {
border: solid 1px var(--brand-500);
background-color: var(--surface-2);
}
.fcaixa_item>.fc_separa {
height: 10px;
}
.fcaixa_item>.fc_placa {
font-family: var(--font-sans);
color: var(--brand-500);
font-size: 24px;
}
.fcaixa_item>.fc_campo {
height: 50px;
margin-right: 5px;
position: relative;
float: left;
}
.fcaixa_item>.fc_campo span {
font-size: 12px;
color: var(--text);
font-family: var(--font-sans);
font-weight: normal;
}
.fcaixa_item>.fc_campo select {
color: var(--text);
font-family: var(--font-sans);
font-size: 11px;
border: solid 1px var(--border);
height: 24px;
width: 100%;
background-color: var(--surface);
-moz-appearance: none;
-moz-border-end-color: var(--text);
}
.fcaixa_item>.fc_campo select:hover {
border-color: var(--brand-500);
}
.fcaixa_item>.fc_campo input[type=text] {
color: var(--text);
font-family: var(--font-sans);
font-size: 11px;
border: solid 1px var(--border);
height: 24px;
width: 100%;
background-color: var(--surface);
}
.fcaixa_item>.fc_campo input[type=text]:hover {
border-color: var(--brand-500);
}
.fcaixa_btn-enviar {
text-align: center;
margin-top: 20px;
}
.cx_submenu {
float: left;
margin-right: 15px;
background-color: var(--brand-400);
text-align: center;
transition: ease 0.2s;
border-radius: var(--radius-sm);
}
.cx_submenu:hover {
transition: ease 0.2s;
background-color: var(--text-2);
}
.cx_submenu a {
padding: 10px 10px;
color: var(--surface);
font-family: var(--font-sans);
font-size: 13px;
display: block;
text-decoration: none;
}
/*botões usados em ações do imóvel*/
.menu-item {
position: relative;
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
border-radius: var(--radius-sm);
background-color: var(--surface);
padding: 12px 14px 12px 38px;
margin: 6px;
color: var(--text-2);
font-weight: 600;
font-family: var(--font-sans);
font-size: var(--font-size-md);
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
}
.menu-item-imprimir {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: var(--font-size-2xl);
cursor: pointer;
color: var(--brand-500);
}
.menu-item-imprimir:hover {
color: var(--brand-700);
}
.menu-item .fa {
position: absolute;
top: 50%;
left: 14px;
transform: translateY(-50%);
font-size: 16px;
color: var(--brand-500);
}
.menu-item:hover {
background-color: var(--surface-2);
border-color: var(--surface-4);
}
.menu-item-active {
background-color: var(--brand-50);
color: var(--brand-800);
border-color: rgba(0, 146, 63, 0.18);
}
.invisivel {
display: none;
}
.visivel {
visibility: visible;
}
/* ===== Lista e Formulários ===== */
.formulario {
display: none;
}
.lista-itens {
display: block;
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
font-size: 1em;
overflow: auto;
width: auto;
margin-top: 50px;
}
/* ===== Tabelas ===== */
.cabecalho {
display: table;
border-collapse: collapse;
height: 25px;
vertical-align: middle;
width: 100%;
}
.cabecalho-item {
background-color: var(--surface-2);
color: var(--muted);
font-weight: bold;
padding: 10px 10px;
text-align: left;
min-width: 50px;
}
.contorno-chamada {
padding: 5px 12px;
border-radius: var(--radius-sm);
background-color: var(--surface-3);
font-size: var(--font-size-sm);
}
.div_corpo_email_rodape {
text-align: center;
}
.contorno-chamada-status {
padding: 5px 12px;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
color: #FFF;
cursor: pointer;
}
.contorno-chamada-status:hover {
color: #fff !important;
}
.tabela {
color: inherit;
border-collapse: collapse;
height: 40px;
display: table;
outline: none;
vertical-align: middle;
width: 100%;
color: var(--text);
}
.tabela-link {
display: block;
line-height: 20px;
}
.input-shadow-border {
border: none;
box-shadow: var(--shadow-sm);
}
.tabela-item {
font-weight: 400;
display: table-cell;
text-align: center;
border-bottom: 1px solid var(--border);
vertical-align: inherit;
padding: 10px 10px;
text-align: left;
position: relative;
}
.tabela-item-dados {
margin-bottom: 3px;
cursor: default;
position: relative;
}
.tabela-item-nota {
font-style: italic;
position: relative;
cursor: zoom-in;
}
.tabela-item-nota-completo {
display: none;
padding: 10px 10px;
position: absolute;
background: var(--surface-2);
border-radius: var(--radius-sm);
left: 10px;
bottom: -10px;
box-shadow: var(--shadow-md);
z-index: 999;
cursor: zoom-out;
max-width: 450px;
overflow: hidden;
height: auto;
}
.tabela-item-dados:hover {
color: var(--muted);
transition: 1s all;
}
.remove-lupa {
cursor: default;
}
.tabela:hover {
background-color: var(--surface-2);
transition: all 0.4s ease;
}
.tabela-item-tam1 {
width: 10%;
}
.tabela-item-tam1b {
width: 11%;
}
.tabela-item-tam2 {
width: 29%;
}
.tabela-item-tam3 {
width: 10%;
}
.tabela-item-tam4 {
width: 10%;
}
.tabela-item-tam5 {
width: 5%;
}
.tabela-item-data {
width: 15%;
}
.tabela-item-tipo {
width: 15%;
}
.tabela-item-acoes {
width: 10%;
}
.tabela-ficha-nome {
width: 70%;
}
.tabela-ficha-data {
width: 15%;
}
.tabela-ficha-acoes {
width: 10%;
}
.editar {
cursor: pointer;
user-select: none;
}
.icone-acoes {
cursor: pointer;
padding: 4px;
font-size: 16px;
}
.icone-acoes:hover {
color: var(--brand-500);
}
/* ===== Linhas e Campos ===== */
.linha-campos {
width: 100%;
margin-bottom: 15px;
}
.linha-editor {
width: 100%;
margin-bottom: 15px;
overflow: hidden;
}
.linha-informacoes {
margin-bottom: 15px;
}
.linha-campos>label {
font-weight: bold;
margin-bottom: 5px;
display: inline-block;
}
.linha-campos>span {
float: left;
width: 80px;
font-size: var(--font-size-lg);
font-weight: bold;
font-family: var(--font-sans);
margin-top: 12px;
}
/* ===== Tabs (Legacy) ===== */
.tab {
overflow: hidden;
border: 1px solid var(--border);
background-color: var(--surface-2);
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: var(--surface-3);
}
.tab button.active {
background-color: var(--surface-4);
}
.tabcontent {
padding: 6px 12px;
border: 1px solid var(--border);
border-top: none;
}
.itens-tab {
display: flex;
flex-flow: wrap;
}
.itens-tab>span {
padding: 15px;
cursor: pointer;
}
/* ===== Toggle Switch ===== */
.enviar-email-label {
margin-right: 25px;
font-size: var(--font-size-md);
font-weight: bold;
text-transform: uppercase;
color: var(--muted);
}
.onoffswitch {
position: relative;
width: 35px;
margin-right: 20px;
float: right;
user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
height: 15px;
padding: 0;
line-height: 20px;
border: 0px solid #FFFFFF;
border-radius: 30px;
background-color: var(--inactive);
transition: all 0.4s ease;
}
.onoffswitch-label:before {
content: "";
display: block;
width: 21px;
height: 21px;
margin: -4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 27px;
border-radius: 30px;
box-shadow: var(--shadow-lg);
transition: all 0.4s ease;
}
.onoffswitch-label-ativo {
display: block;
overflow: hidden;
cursor: pointer;
height: 15px;
padding: 0;
line-height: 20px;
border: 0px solid #FFFFFF;
border-radius: 30px;
background-color: var(--brand-500);
transition: all 0.4s ease;
}
.onoffswitch-label-ativo:before {
content: "";
display: block;
width: 21px;
height: 21px;
margin: -4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 0px;
border-radius: 30px;
box-shadow: var(--shadow-xl);
transition: all 0.4s ease;
}
/* ===== Helpers ===== */
#novoClienteDiv {
display: none;
border: 1px solid var(--border);
border-top: none;
padding: 5px;
border-radius: var(--radius-sm);
overflow: hidden;
width: calc(100% - 40px);
}
#titulo_personalizado {
display: none;
}
#input-group-email,
#input-group-email-assunto {
background-color: var(--surface);
box-shadow: var(--shadow-xs);
border-radius: var(--radius-sm) 0px 0px var(--radius-sm);
}
#novoTituloDiv {
display: none;
}
#basic-addon1 {
box-shadow: var(--shadow-xs);
}
#enviar_email {
display: none;
}
#bloco_corpo_ficha {
display: none;
padding-top: 10px;
width: 100%;
overflow: hidden;
}
#div_corpo_email {
display: none;
border: 1px solid var(--border);
margin-top: -3px;
margin-bottom: 30px;
border-radius: var(--radius-sm);
transition: 1s filter;
position: relative;
}
.div_corpo_botao_limpar {
float: right;
margin: 30px 25px 0px 0px;
padding: 5px;
color: #ff5315;
font-size: 15px;
cursor: pointer;
}
#div_corpo_email_spinner {
display: none;
position: absolute;
left: calc(50% - 30px);
z-index: 999;
color: var(--muted);
}
.anim_agitar {
animation: shake 0.7s;
}
@keyframes shake {
0% {
transform: translate(0.5px, 0px);
}
10% {
transform: translate(-0.5px, 0px);
}
20% {
transform: translate(-1.5px, 0px);
}
30% {
transform: translate(1.5px, 0px);
}
40% {
transform: translate(0.5px, 0px);
}
50% {
transform: translate(-0.5px, 0px);
}
60% {
transform: translate(-1.5px, 0px);
}
70% {
transform: translate(1.5px, 0px);
}
80% {
transform: translate(-0.5px, 0px);
}
90% {
transform: translate(0.5px, 0px);
}
100% {
transform: translate(0.5px, 0px);
}
}
.div_input_email {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: 0.3s all;
}
.div_form_email_assunto {
box-shadow: none !important;
}
.div_form_email {
box-shadow: none !important;
text-transform: lowercase;
}
.div_form_group {
width: 110px;
}
.div_span_email {
box-shadow: none !important;
}
.corpo_email_grid_2 {
width: 140px;
margin: 0;
padding: 0;
}
.helper-margin {
margin: 0px;
}
.helper-padding {
padding: 0px;
}
#erros {
display: none;
}
.tooltip-balao {
font-family: var(--font-sans);
position: absolute;
width: 145px;
padding: 3px;
text-align: center;
color: #FFF;
box-shadow: var(--shadow-sm);
border-radius: var(--radius-sm);
font-size: var(--font-size-md);
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
}
/* PAGINACAO */
.lista_imoveis_paginacao {
position: relative;
padding: 5px 0px;
text-align: center;
width: 90%;
border: 1px solid var(--surface-2);
box-shadow: var(--shadow-sm);
margin: 0px 0px 20px 0px;
font-family: var(--font-sans);
font-size: 14px;
}
.lista_imoveis_paginacao select {
position: absolute;
right: 10px;
width: 180px;
height: 30px;
}
.lipagina-btn-paginacao {
display: inline-block;
border-radius: var(--radius-sm);
background: var(--brand-500);
color: var(--surface) !important;
cursor: pointer;
font-size: 14px;
font-weight: bold;
line-height: 1;
overflow: visible;
padding: 12px 12px;
position: relative;
text-decoration: none;
width: auto;
text-align: center;
border: none;
margin: 3px;
font-family: var(--font-sans);
}
.lipagina-btn-paginacao-atual {
display: inline-block;
border-radius: var(--radius-sm);
color: var(--surface) !important;
cursor: pointer;
font-size: 14px;
font-weight: bold;
line-height: 1;
overflow: visible;
padding: 12px 12px;
position: relative;
text-decoration: none;
width: auto;
text-align: center;
border: none;
margin: 3px;
font-family: var(--font-sans);
}
.li_bgcor_vaz {
background: var(--brand-700);
}
.lipagina-btn-paginacao:hover {
background: var(--brand-900);
color: var(--surface);
}
/* IDENTIFICACAO */
.branco {
color: var(--surface);
}
.frm_campo_ident {
padding-right: 5px;
color: var(--text);
border: solid 1px var(--border);
width: 370px;
height: 35px;
font-family: var(--font-sans);
font-size: 12px;
line-height: 33px;
}
.frm_campo_identu {
padding-left: 123px;
background-image: url(imagens/identificacao_usuario.png);
}
.frm_campo_idents {
padding-left: 113px;
background-image: url(imagens/identificacao_senha.png);
}
/* Relatorios */
.fonte_texto {
font-size: 13px;
font-family: var(--font-sans);
color: var(--text);
}
.fonte_ttitulo {
font-size: 24px;
font-weight: bold;
font-family: var(--font-sans);
color: var(--text);
}
/* ImobrNegocios */
.imobrNegCx {
width: 100%;
border: 1px solid var(--border);
position: relative;
margin-bottom: 20px;
font-family: var(--font-sans);
color: var(--text-2);
font-size: 12px;
}
.imobrNegCx:hover {
border: 1px solid var(--brand-400);
}
.imobrNegCx>.iNItemData {
float: left;
height: 65px;
width: 95px;
border-right: 1px solid var(--border);
text-align: center;
padding: 40px 0px 0px 0px;
}
.imobrNegCx>.iNItemInteresse {
float: left;
height: 77px;
width: 147px;
border-right: 1px solid var(--border);
background-color: var(--surface-2);
text-align: center;
padding-top: 28px;
line-height: 18px;
}
.imobrNegCx>.iNItemInteresse span {
color: var(--brand-400);
}
.imobrNegCx>.iNItemCaracteristicas {
float: left;
height: 85px;
width: 164px;
border-right: 1px solid var(--border);
background-color: var(--surface-2);
padding-top: 20px;
}
.imobrNegCx>.iNItemCaracteristicas>.INCaracCx {
font-size: 11px;
height: 22px;
line-height: 22px;
padding-left: 25px;
margin-left: 20px;
}
.imobrNegCx>.iNItemCaracteristicas>.INCaracCx1 {
background: url(imagens/imobrnegocios/ic_caracteristicas1.png) center left no-repeat;
}
.imobrNegCx>.iNItemCaracteristicas>.INCaracCx2 {
background: url(imagens/imobrnegocios/ic_caracteristicas2.png) center left no-repeat;
}
.imobrNegCx>.iNItemCaracteristicas>.INCaracCx3 {
background: url(imagens/imobrnegocios/ic_caracteristicas3.png) center left no-repeat;
}
.imobrNegCx>.iNItemLocalizacao {
float: left;
height: 65px;
width: 178px;
background-color: var(--surface-2);
text-align: center;
padding-top: 40px;
}
.imobrNegCx>.iNItemLocalizacao span {
color: var(--brand-400);
font-size: 14px;
font-weight: bold;
display: block;
}
.imobrNegCx>.iNItemSepara1 {
float: left;
height: 105px;
width: 7px;
}
.imobrNegCx>.iNItemDesc {
float: left;
height: 105px;
width: 250px;
font-style: italic;
padding: 0px 10px 0px 10px;
}
.imobrNegCx>.iNItemDesc p {
display: table-cell;
height: 105px;
vertical-align: middle;
}
.imobrNegCx>.iNItemContato {
float: left;
position: relative;
height: 105px;
width: 120px;
border-left: 1px solid var(--border);
}
.imobrNegCx>.iNItemContato>.iNVerContato {
height: 25px;
margin-top: 40px;
margin-left: 10px;
padding-left: 20px;
background: url(imagens/imobrnegocios/ic_contato.png) center left no-repeat;
}
.imobrNegCx>.iNItemContato>.iNVerContato a {
color: var(--muted);
font-family: var(--font-sans);
font-size: 12px;
display: block;
padding: 8px;
}
.imobrNegCx>.iNItemContato>.iNVerContato a:hover {
color: var(--text);
}
.imobrNegCx>.INContatoDet {
position: relative;
height: 70px;
width: 100%;
background-color: var(--brand-400);
text-align: center;
font-size: 16px;
color: var(--surface);
padding-top: 25px;
display: none;
}
.imobrNegCx>.INContatoDet span {
font-size: 20px;
display: block;
}
.imobrNegCx>.INContatoDet>.INSeta {
position: absolute;
top: -1px;
width: 30px;
height: 16px;
right: 50px;
}
.CxTotal {
width: 100%;
border: 1px solid var(--border);
position: relative;
margin-bottom: 20px;
font-family: var(--font-sans);
color: var(--text-2);
font-size: 12px;
padding: 10px;
}
/* Relatorios Imoveis */
.rel_fonte1 {
font-size: 13px;
font-family: var(--font-sans);
color: var(--text);
}
.rel_fontegde {
font-size: 18px;
font-family: var(--font-sans);
color: var(--text);
}
.rel_fontepqn {
font-size: 11px;
font-family: var(--font-sans);
color: var(--text);
}
.rel_fichaimo_borda {
border: 1px solid var(--border);
}
.rel_fichaimo_bordaSI {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.rel_fichaimo_bordaS {
border-top: 1px solid var(--border);
}
.rel_fichaimo_bordaI {
border-bottom: 1px solid var(--border);
}
.rel_fichaimo_titulocx {
border: 1px solid var(--border);
padding: 5px;
padding-left: 10px;
margin-bottom: 15px;
font-size: 18px;
font-family: var(--font-sans);
color: var(--text);
}
/* FORA Botoes Acoes Gerenciador de Atendimento */
.GAtendCxAcoes {
float: left;
width: 100px;
}
.GAtendCxAcoes>.GAtendAcoesMenu {
height: 32px;
line-height: 32px;
margin-left: 15px;
}
.GAtendCxAcoes>.GAtendAcoesMenu a {
font-family: var(--font-sans);
color: var(--text-2);
font-size: 12px;
padding-left: 30px;
display: block;
}
.GAtendCxAcoes>.GAtendAcoesMenu a:hover {
color: var(--text);
}
.GAtendCxAcoes>.GAtendAcoesMenuic1 {
background: url(imagens/botoes/bt_visualizar.png) center left no-repeat;
}
.GAtendCxAcoes>.GAtendAcoesMenuic2 {
background: url(imagens/botoes/bt_alterar.png) center left no-repeat;
}
.GAtendCxAcoes>.GAtendAcoesMenuic4 {
background: url(imagens/botoes/bt_excluir.png) center left no-repeat;
}
.GAtendCxAcoes>.GAtendAcoesMenuic1off {
background: url(imagens/botoes/bt_visualizaroff.png) center left no-repeat;
font-family: var(--font-sans);
color: var(--muted);
font-size: 12px;
padding-left: 30px;
display: block;
}
/* Gerenciador Listar */
.GerAtendListaCx {
width: 100%;
border: 1px solid var(--border);
position: relative;
margin-bottom: 5px;
margin-top: 15px;
font-family: var(--font-sans);
color: var(--text-2);
font-size: 12px;
overflow: hidden;
}
.GerAtendListaCx:hover {
border: 1px solid var(--brand-400);
}
.GerAtendListaCx>.GALisData {
float: left;
width: 91px;
height: 55px;
padding-top: 20px;
border-right: 1px solid var(--border);
margin-right: 10px;
text-align: center;
position: relative;
}
.GerAtendListaCx>.GALisData span {
font-weight: bold;
line-height: 20px;
display: block;
}
.GerAtendListaCx>.GALisData>.GALisDataExapnde {
position: absolute;
width: 15px;
height: 15px;
bottom: 1px;
left: 1px;
}
.GerAtendListaCx>.GALisCliente {
float: left;
width: 235px;
height: 67px;
border-right: 1px solid var(--border);
text-align: left;
font-size: 10px;
padding-top: 8px;
}
.GerAtendListaCx>.GALisCliente span {
display: block;
font-size: 13px;
font-weight: bold;
margin-bottom: 5px;
height: 17px;
overflow: hidden;
}
.GerAtendListaCx>.GALisStatus {
float: left;
width: 100px;
height: 55px;
padding-top: 20px;
border-right: 1px solid var(--border);
text-align: center;
font-size: 11px;
line-height: 20px;
}
.GerAtendListaCx>.GALisTexto {
float: left;
width: 435px;
height: 75px;
background-color: var(--surface-2);
padding: 0px 10px 0px 10px;
font-size: 11px;
color: var(--text-2);
}
.GerAtendListaCx>.GALisTexto p {
display: table-cell;
height: 75px;
vertical-align: middle;
}
.GerAtendListaCx>.GALisSepara1 {
float: left;
width: 7px;
height: 75px;
}
.GerAtendListaCx>.GALisMenuCx2 {
float: left;
width: 85px;
height: 75px;
}
.GerAtendListaCx>.GALisMenuCx2>.ImoLisMenu2 {
height: 25px;
line-height: 25px;
margin-left: 5px;
}
.GerAtendListaCx>.GALisMenuCx2>.ImoLisMenu2 a {
font-family: var(--font-sans);
color: var(--text-2);
font-size: 12px;
padding-left: 30px;
display: block;
}
.GerAtendListaCx>.GALisMenuCx2>.ImoLisMenu2 a:hover {
color: var(--text);
}
.GerAtendListaCx>.GALisMenuCx2>.ImoLisMenu2ic1 {
background: url(imagens/botoes/bt_visualizar.png) center left no-repeat;
}
.GerAtendListaCx>.GALisMenuCx2>.ImoLisMenu2ic2 {
background: url(imagens/botoes/bt_alterar.png) center left no-repeat;
}
.GerAtendListaCx>.GALisMenuCx2>.ImoLisMenu2ic4 {
background: url(imagens/botoes/bt_excluir.png) center left no-repeat;
}
.ImoLisAlterar {
background: url(imagens/botoes/bt_alterar2.png) center left no-repeat;
}
/* Gerenciador Listar Etapas */
.GerAtendEtapaCx {
width: 988px;
border: 1px solid var(--border);
position: relative;
margin-bottom: 5px;
font-family: var(--font-sans);
color: var(--text-2);
font-size: 12px;
overflow: hidden;
}
.GerAtendEtapaCx>.GALisEtapaData {
float: left;
width: 78px;
height: 50px;
padding-top: 25px;
border-right: 1px solid var(--border);
margin-right: 10px;
text-align: center;
}
.GerAtendEtapaCx>.GALisEtapaStatus {
float: left;
width: 175px;
height: 55px;
padding-top: 20px;
text-align: left;
}
.GerAtendEtapaCx>.GALisEtapaStatus span {
font-weight: bold;
line-height: 20px;
display: block;
}
.GALisECor1 {
color: #49c0ad;
}
.GALisECor2 {
color: #2ab3dd;
}
.GALisECor3 {
color: #74e322;
}
.GALisECor4 {
color: #f15e1b;
}
.GALisECor5 {
color: #67298c;
}
.GALisECor1bg {
background-color: #49c0ad;
}
.GALisECor2bg {
background-color: #2ab3dd;
}
.GALisECor3bg {
background-color: #74e322;
}
.GALisECor4bg {
background-color: #f15e1b;
}
.GALisECor5bg {
background-color: #67298c;
}
.GerAtendEtapaCx>.GALisEtapaStatusCor {
float: left;
width: 4px;
height: 75px;
overflow: hidden;
}
.GerAtendEtapaCx>.GALisTexto {
float: left;
width: 605px;
height: 75px;
background-color: var(--surface-2);
padding: 0px 10px 0px 10px;
font-size: 12px;
color: var(--text-2);
}
.GerAtendEtapaCx>.GALisTexto p {
display: table-cell;
height: 75px;
vertical-align: middle;
}
.GerAtendEtapaCx>.GALisSepara1 {
float: left;
width: 7px;
height: 75px;
}
.GerAtendEtapaCx>.GALisMenuCx2 {
float: left;
width: 85px;
height: 65px;
padding-top: 10px;
}
.GerAtendEtapaCx>.GALisMenuCx2>.ImoLisMenu2 {
height: 30px;
line-height: 30px;
margin-left: 5px;
}
.GerAtendEtapaCx>.GALisMenuCx2>.ImoLisMenu2 a {
font-family: var(--font-sans);
color: var(--text-2);
font-size: 12px;
padding-left: 30px;
display: block;
}
.GerAtendEtapaCx>.GALisMenuCx2>.ImoLisMenu2 a:hover {
color: var(--text);
}
.GerAtendEtapaCx>.GALisMenuCx2>.ImoLisMenu2ic1 {
background: url(imagens/botoes/bt_visualizar.png) center left no-repeat;
}
.GerAtendEtapaCx>.GALisMenuCx2>.ImoLisMenu2ic4 {
background: url(imagens/botoes/bt_excluir.png) center left no-repeat;
}
.qdoAvisoCaixa {
position: relative;
height: 290px;
}
.qdoAvisoBtn {
position: absolute;
width: 90px;
height: 20px;
right: 0px;
bottom: -20px;
text-align: right;
}
.qdoAvisoTexto {
background-color: var(--surface-2);
border: 1px solid var(--surface-2);
padding: 5px;
width: 100%;
height: 290px;
font-family: var(--font-sans);
color: var(--text);
}
.btn_etapas:hover {
opacity: 0.9;
}
.btenviar1 {
border-radius: var(--radius-sm);
padding: 15px 33px;
font-size: 15px;
text-decoration: none;
font-weight: bold;
transition: ease 0.3s;
border: 0;
cursor: pointer;
background: var(--brand-600);
color: var(--surface);
}
.btenviar1:hover {
transition: ease 0.3s;
background: var(--text-2);
}
.btenviar2 {
border-radius: 4px;
padding: 6px 8px;
font-size: 11px;
text-decoration: none;
font-weight: bold;
transition: ease 0.3s;
border: 0;
cursor: pointer;
background: var(--brand-600);
color: var(--surface);
}
.btenviar2:hover {
transition: ease 0.4s;
background: var(--text-2);
}
.btnExemploA {
padding: 5px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background-color: var(--surface-2);
margin-left: 10px;
}
.negrito {
font-weight: bold;
}
.btnPropNovo {
cursor: pointer;
border-radius: 4px;
padding: 2.5px 5px;
font-size: 11px;
background-color: #d9d9dd;
text-decoration: none !important;
transition: ease 0.1s;
}
.btnPropNovo:hover {
background-color: #0094e1;
color: var(--surface);
transition: ease 0.1s;
}
.lowercase {
text-transform: lowercase;
}
.linhaHover:hover {
background-color: #e1e1e1;
transition: ease 0.1s;
}
/* ===== src/css/17-config_imovel-menu.css ===== */
/* ================================================================
17-CONFIG_IMOVEL-MENU.CSS
================================================================
PROPÓSITO:
Navegação específica do módulo de configuração de imóveis,
incluindo menus contextuais e submenus.
CONTEÚDO:
- Menu de navegação (.navegacao) em formato tabs
- Links ativos com destaque verde
- Suporte para ícones SVG nos itens
- Estados hover e active
- Responsividade mobile
CONTEXTO:
Usado especificamente nas páginas de configuração
e edição de imóveis do CRM.
NOTA:
Este é um componente grande e complexo (7000+ linhas).
Considera-se refatorar e modularizar em versões futuras.
================================================================ */
ul.navegacao {
display: flex;
gap: 0.5rem;
width: 100%;
min-height: auto;
margin: 0 0 1rem 0;
padding: 0.5rem;
border-bottom: none;
font-family: var(--font-sans);
text-transform: none;
background: var(--surface-2);
border-radius: 12px;
list-style: none;
}
.navegacao li {
margin: 0;
padding: 0;
}
.navegacao li a {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 8px;
font-weight: 500;
font-size: var(--font-size-lg);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background: transparent;
text-decoration: none;
color: var(--inactive);
}
.navegacao li a:hover {
background: var(--surface-3);
color: var(--text);
}
.navegacao li a.active {
background: white;
color: var(--brand-500);
box-shadow: var(--shadow-md);
}
/* Suporte para ícones SVG dentro dos links */
.navegacao li a svg {
width: 16px;
height: 16px;
}
/* Dropdown Button */
.dropbtn {
width: 100%;
padding: 0px 0;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f4f4f4;
min-width: 170px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 100;
font-size: 12px;
margin-top: 0px;
left: -20px;
}
.dropdown-content a {
color: #6a6c6f;
padding: 10px;
text-decoration: none;
display: inline;
width: 100%;
float: left;
display: flex;
align-items: center;
gap: 8px;
}
.dropdown-content a svg {
width: 16px;
}
.dropdown-content a:hover {
font-weight: bold;
background-color: #CCC;
}
.dropdown:hover .dropdown-content {
display: block;
border-left: 0px solid #6a6c6f;
background-color: #e9e9e9;
}
/*ITENS DA VIDA DO IMOVEL */
.box-vidaimovel {
float: left;
width: 100%;
height: 180px;
background-image: url(imgs/site/bg-vidaimovel.jpg);
}
.box-vidaimovel {
padding: 20px 0;
outline: 0px solid red;
float: left;
margin: 0 0 2px 0;
}
.box-vidaimovel div:nth-of-type(1) {
outline: 0px solid red;
float: left;
width: 18%;
min-height: 140px;
margin: 0 10px 0 25px;
transition: ease 0.3s;
}
.box-vidaimovel div:nth-of-type(2) {
outline: 0px solid red;
float: left;
width: 62%;
min-height: 140px;
transition: ease 0.3s;
}
.box-vidaimovel div:nth-of-type(3) {
outline: 0px solid red;
float: left;
width: 15%;
min-height: 140px;
}
.box-vidaimovel h3 {
margin: 2px 0;
text-transform: uppercase;
font-family: var(--font-sans);
font-weight: 600;
color: #3d3e3f;
}
.box-vidaimovel p {
margin: 2px 0;
line-height: 1.5;
font-family: var(--font-sans);
font-weight: 100;
color: #222;
}
.box-vidaimovel_imagem {
width: 100%;
height: 100%;
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
/* ITENS */
.imovel-menu-topo {
float: left;
width: 100%;
list-style: none;
margin: 0 0px 20px 0;
}
.imovel-menu-topo ul {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.imovel-menu-topo li {
float: left;
padding: 10px 0;
/* width: 25%; */
height: auto;
outline: 0px solid red;
}
.imovel-menu-topo li:nth-child(1) {
padding-right: 20px;
border-right: none;
}
.imovel-menu-topo li:nth-child(2) {
padding-left: 20px;
padding-right: 20px;
border-right: none;
}
.imovel-menu-topo li:nth-child(3) {
padding-left: 20px;
padding-right: 20px;
border-right: none;
}
.imovel-menu-topo li:nth-child(4) {
padding-left: 20px;
border-right: none;
}
.imovel-menu-topo a {
float: left;
color: white;
border: 0;
min-width: 65px;
margin: 0 3px;
text-align: center;
text-decoration: none;
background: var(--brand-500);
border-radius: var(--radius-sm);
height: var(--input-height-md);
font-size: var(--input-font-sm);
padding: 10px 10px;
font-weight: 800;
}
.imovel-menu-topo a:hover {
transition: ease 0.4s;
background: var(--brand-600);
transform: translateY(-1px);
color: white;
}
.imovel-menu-topo a.btn-default:hover {
transition: ease 0.4s;
background: var(--brand-100);
color: var(--brand-900);
}
.imovel-menu-topo a.btn-default {
/* float: left; */
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
background: var(--brand-50);
color: var(--brand-800);
border-radius: var(--radius-sm);
border: 1px solid #d9dee2;
text-decoration: none;
}
/* .imovel-menu-topo a.btn-default img {
float: left;
} */
.imovel-menu-topo p {
float: left;
padding: 0px 0px;
margin: 9px 0;
}
.imovel-menu-topo i {
font-size: 16px;
color: #e1e6e9;
padding: 0px 0px;
}
/* NOTE: .conteudo and .corpo .conteudo base styles consolidated at line ~9343 */
@media only screen and (max-width: 768px) {
.imovel-menu-topo a.btn-default {
margin: 5px;
}
/* NOTE: .corpo .conteudo mobile styles consolidated at line ~9343 */
#botoes_acoes {
display: none;
}
}
@media only screen and (max-width: 719px) {
.imovel-menu-topo li {
float: left;
width: 100%;
height: auto;
outline: 0px solid red;
padding: 10px 0;
}
.imovel-menu-topo li:nth-child(1),
.imovel-menu-topo li:nth-child(2),
.imovel-menu-topo li:nth-child(3),
.imovel-menu-topo li:nth-child(4) {
border-right: 0px solid #e1e6e9;
padding-left: 0;
}
/* .imovel-menu-topo a.btn-default {
margin: 5px;
} */
/*NAVEGACAO*/
ul.navegacao {
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0 0 30px 0;
border-bottom: 1px solid #dedede;
font-family: var(--font-sans);
text-transform: uppercase;
}
.navegacao li {
list-style: none;
float: left;
width: 100%;
padding: 0px 5px;
border-right: 0px solid #dedede;
margin-top: 12px;
}
.navegacao li a {
list-style: none;
float: left;
width: 100%;
text-decoration: none;
padding: 10px 20px;
font-weight: bold;
}
.navegacao li a:hover {
background: #eff3f5;
list-style: none;
float: left;
width: 100%;
border-bottom: 0px solid #0db33b;
transition: ease 0.3s;
}
.navegacao li a.active {
border-bottom: 4px solid #0db33b;
color: #0db33b;
background: #eff3f5;
padding: 21px 40px;
margin: 0;
}
/* ITENS VIDA IMOVEL */
.box-vidaimovel {
float: left;
width: 100%;
height: auto;
padding: 20px 20px;
}
.box-vidaimovel div:nth-of-type(1) {
float: left;
width: 100%;
min-height: auto;
margin: 10px 0;
transition: ease 0.3s;
text-align: center;
}
.box-vidaimovel div:nth-of-type(1) img {
width: 100%;
max-height: 250px;
}
.box-vidaimovel div:nth-of-type(2) {
width: 100%;
margin: 20px 0;
}
.box-vidaimovel div:nth-of-type(3) {
width: 100%;
}
.btn-acoes-upload div:nth-child(1),
.btn-acoes-upload div:nth-child(2) {
text-align: left;
}
}
@media only screen and (max-width: 420px) {
.imovel-menu-topo a.btn-default {
font-size: 10px;
}
}
.hide {
display: none;
}
/* ============================================
CORPO INTERNO - List and Detail Pages
Internal body components using BEM methodology
NOTE: .corpo .conteudo base styles consolidated
at line ~9343
============================================ */
.corpo-interno {
width: 100%;
float: left;
}
.corpo-interno__voltar {
color: var(--text);
margin: 10px;
transition: 0.3s all;
}
.corpo-interno__voltar:hover {
color: var(--muted);
margin: 7px;
}
.corpo-interno__categoria__cabecalho {
position: relative;
}
.corpo-interno__categoria__titulo {
padding: 15px 15px 15px 0px;
}
.corpo-interno__categoria__titulo a {
float: right;
}
.corpo-interno__categoria__titulo span {
font-size: var(--font-size-md);
margin-left: 25px;
border-left: 1px solid var(--border);
padding-left: 10px;
font-weight: normal;
}
.corpo-interno__chamada {
margin-bottom: 10px;
padding: 10px;
margin-top: 15px;
display: flex;
align-items: center;
}
.corpo-interno__chamada h1 span {
font-weight: bold;
color: var(--brand-500);
}
.corpo-interno__chamada h1 {
text-transform: uppercase;
border-bottom: 2px solid var(--border);
padding-bottom: 10px;
margin-bottom: 15px;
font-size: 24px;
font-weight: normal;
}
.corpo-interno__chamada p {
margin-bottom: 10px;
}
.corpo-interno__categoria__cabecalho__titulo {
display: inline-block;
color: var(--text-2);
cursor: default;
}
.corpo-interno__categoria__cabecalho__texto {
vertical-align: top;
background: var(--brand-500);
border-radius: var(--radius-sm);
color: #fff;
display: inline-block;
margin-left: 10px;
width: 60px;
height: 20px;
padding: 3px 7px;
cursor: pointer;
transition: background 0.2s;
}
.corpo-interno__categoria__cabecalho__texto:hover {
background: var(--brand-600);
}
.corpo-interno__categoria__cabecalho__icone {
font-size: var(--font-size-md);
}
/* ===== CORPO CONFIGURAR ===== */
.corpo-interno__configurar__cabecalho {
display: flex;
justify-content: space-between;
margin: 10px 0px;
}
.corpo-interno__configurar__cabecalho__titulo__select {
font-size: 1em;
font-weight: bold;
font-family: var(--font-sans);
border: none;
}
.corpo-interno__configurar__linha {
margin: 10px 0px;
padding: 0px;
}
.corpo-interno--bordered {
border: 1px solid var(--border);
}
.corpo-interno--hide {
display: none;
}
.conteudo_linha_etapa_interna {
margin: 20px 0px;
}
.corpo-interno__configurar__linha__input__resultado {
border: 1px solid var(--border);
position: absolute;
background-color: var(--surface);
z-index: 999;
transition: 0.3s all;
width: 100%;
top: 28px;
border-radius: 0px 0 var(--radius-sm) var(--radius-sm);
border-top: none;
box-shadow: var(--shadow-md);
}
.corpo-interno__configurar__linha__input__group {
position: relative;
}
.corpo-interno__configurar__linha__input__group__button {
position: absolute;
top: 5px;
right: 10px;
padding: 2px 7px;
background-color: #ef4444;
border-radius: 20px;
color: #fff;
cursor: pointer;
font-weight: bold;
width: 20px;
height: 20px;
transition: background 0.2s;
}
.corpo-interno__configurar__linha__input__group__button:hover {
background-color: #dc2626;
}
.corpo-interno__configurar__linha__input {
color: var(--text);
font-family: var(--font-sans);
font-size: var(--input-font-sm);
border: solid 1px var(--border);
height: var(--input-height-sm);
width: 100%;
background-color: var(--surface);
border-radius: var(--radius-sm);
padding-left: 10px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.corpo-interno__configurar__linha__input:focus {
border-color: var(--brand-500);
outline: none;
border: 2px solid var(--brand-500);
}
.corpo-interno__configurar__linha__input--disabled {
background-color: var(--surface-2);
cursor: not-allowed;
color: var(--muted);
}
.paginas-exibicao__linha__input__resultado {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
}
.paginas-exibicao__linha__input__resultado__item {
width: 100%;
display: block;
padding: 10px 5px;
transition: 0.2s all;
cursor: pointer;
}
.paginas-exibicao__linha__input__resultado__item:hover {
background-color: var(--surface-2);
}
/* ===== TABELA ===== */
.corpo-interno__tabela {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-lg);
background-color: var(--surface);
}
.corpo-interno__categoria {
margin-bottom: 25px;
padding: 0px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.corpo-interno__tabela thead {
background: var(--surface-2);
border-bottom: 2px solid var(--border);
}
.corpo-interno__tabela thead th {
padding: 14px;
text-align: left;
font-weight: 700;
color: var(--text);
border: 1px solid var(--border);
}
.corpo-interno__tabela__celula--divisor::after {
content: '';
height: 16px;
background-color: var(--border);
position: absolute;
top: 14px;
right: 0;
width: 1px;
}
.corpo-interno__categoria__cabecalho__titulo__icone {
margin: 0px 15px;
color: var(--brand-500);
}
.corpo-interno__chamada__imagem {
width: 260px;
padding: 10px 15px;
text-align: center;
}
.corpo-interno__chamada__imagem img {
width: max-content;
object-fit: contain;
border-radius: var(--radius-sm);
}
.corpo-interno__chamada__texto {
float: left;
width: 70%;
}
.corpo-interno__chamada__btn {
background-color: var(--muted);
color: #FFF;
padding: 6px 12px;
font-weight: normal;
border: none;
border-radius: 8px;
margin-top: 5px;
cursor: pointer;
display: inline-block;
transition: 0.15s;
}
.corpo-interno__chamada__btn:hover {
opacity: 0.95;
scale: 1.015;
box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.2);
background-color: var(--muted);
color: #FFF;
}
.exemplos__btn {
border: 1px solid var(--brand-500);
padding: 6px 12px;
border-radius: var(--radius-sm);
margin-top: 5px;
cursor: pointer;
display: inline-block;
font-size: var(--font-size-md);
position: absolute;
margin-left: 10px;
color: var(--brand-500);
transition: all 0.2s;
font-weight: 600;
}
.exemplos__btn:hover {
background-color: var(--brand-500);
color: #fff;
}
.corpo-interno__tabela__celula {
padding: 14px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid var(--border);
color: var(--text-2);
}
.exibir-em {
transition: 0.2s;
border-radius: var(--radius-sm);
border: 1px solid;
padding: 6px 16px;
cursor: pointer;
font-weight: 600;
font-size: var(--font-size-sm);
}
.exibir-em--azul {
border-color: #0094e1;
color: #0094e1;
background-color: rgba(0, 148, 225, 0.05);
}
.exibir-em--verde {
border-color: var(--brand-500);
color: var(--brand-500);
background-color: var(--brand-50);
}
.exibir-em--laranja {
border-color: #FF9800;
color: #FF9800;
background-color: rgba(255, 152, 0, 0.05);
}
.exibir-em--vermelho {
border-color: #ef4444;
color: #ef4444;
background-color: rgba(239, 68, 68, 0.05);
}
.exibir-em--vermelho:hover {
background-color: #ef4444;
color: #fff;
}
.exibir-em--rosa {
border-color: #ef4dbc;
color: #ef4dbc;
background-color: rgba(239, 77, 188, 0.05);
}
.exibir-em--lilas {
border-color: #00c2c3;
color: #00c2c3;
background-color: rgba(0, 194, 195, 0.05);
}
.exibir-em--roxo {
border-color: #673ab7;
color: #673ab7;
background-color: rgba(103, 58, 183, 0.05);
}
.exibir-em:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.corpo-interno__tabela__cabecalho {
padding: 14px;
text-align: left;
vertical-align: middle;
font-weight: 700;
color: var(--text);
text-transform: uppercase;
font-size: var(--font-size-lg);
border: 1px solid var(--border);
background: var(--surface-2);
}
.corpo-interno__tabela__celula__item {
margin-right: 10px;
font-size: 20px;
}
.corpo-interno__tabela__celula__sem-resultados {
text-align: left;
margin: 15px;
color: var(--muted);
}
.corpo-interno__tabela__celula__sem-resultados i {
display: block;
font-size: 2.5em;
margin: 10px;
}
.corpo-interno__tabela tbody tr {
transition: background-color 0.2s;
}
.corpo-interno__tabela tbody tr:hover {
background: rgba(0, 146, 63, 0.04);
}
.corpo-interno__tabela tbody tr:nth-child(even) {
background: rgba(247, 250, 248, 0.5);
}
.corpo-interno__tabela--listrada>tbody>tr:nth-child(odd)>td,
.corpo-interno__tabela--listrada>tbody>tr:nth-child(odd)>th {
background-color: var(--surface-2);
}
.corpo-interno__tabela__linha:hover>.corpo-interno__tabela__celula,
.corpo-interno__tabela__linha:hover>th {
background-color: rgba(0, 146, 63, 0.04);
}
.corpo-interno__configurar__linha__etapas {
display: flex;
justify-content: space-around;
margin: 30px 10px;
gap: 16px;
}
.corpo-interno__configurar__linha__etapas__caixa {
overflow: hidden;
box-shadow: var(--shadow-sm);
border-radius: var(--radius-md);
border: 1px solid var(--border);
color: var(--text);
transition: all 0.2s;
background-color: var(--surface);
max-width: 300px;
padding: 20px;
cursor: pointer;
}
.corpo-interno__configurar__linha__etapas__caixa:hover {
box-shadow: var(--shadow-md);
background-color: var(--surface-2);
transform: translateY(-2px);
}
.corpo-interno__configurar__linha__etapas__caixa__img {
height: 154px;
text-align: center;
}
.corpo-interno__configurar__linha__etapas__caixa__texto {
display: block;
text-align: center;
margin-top: 25px;
font-size: var(--font-size-3xl);
font-weight: 600;
color: var(--text);
}
.corpo-interno__configurar__linha__etapa {
display: none;
padding: 0px;
margin: 0px;
box-shadow: var(--shadow-sm);
border-radius: var(--radius-md);
overflow: hidden;
}
.corpo-interno__configurar__linha__etapa__titulo {
width: 100%;
padding: 14px 20px;
font-size: var(--font-size-3xl);
font-weight: 700;
background-color: var(--surface-2);
position: relative;
justify-content: space-between;
border-bottom: 1px solid var(--border);
}
.corpo-interno__configurar__linha__etapa__interna {
margin: 0 auto;
padding: 15px;
}
.corpo-interno__configurar__linha__etapa__interna i {
padding: 5px;
cursor: pointer;
color: var(--brand-600);
transition: transform 0.2s, color 0.2s;
}
.corpo-interno__configurar__linha__etapa__interna i:hover {
transform: scale(1.2);
color: var(--brand-500);
}
.corpo-interno__configurar__linha__etapa__interna--full {
width: 100%;
}
.corpo-interno__configurar__linha__etapa__interna--small {
width: 320px;
}
.corpo-interno__configurar__linha__etapa__group {
margin-bottom: 10px;
display: flex;
justify-content: center;
position: relative;
}
.corpo-interno__configurar__linha__etapa__group__input {
display: block;
width: 80%;
}
.corpo-interno__configurar__linha__etapa__group__on-off {
display: block;
height: 30px;
padding: 8px;
color: #fff;
width: 55px;
text-align: center;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.corpo-interno__configurar__linha__etapa__group__apagar {
position: absolute;
right: -27px;
top: 8px;
border-radius: 50%;
background-color: #ef4444;
height: 16px;
width: 16px;
color: #fff;
cursor: pointer;
padding: 1.5px 4.4px;
font-size: var(--font-size-sm);
transition: transform 0.2s, background-color 0.2s;
}
.corpo-interno__configurar__linha__etapa__group__apagar:hover {
transform: scale(1.1);
background-color: #dc2626;
}
.corpo-interno__configurar__on-off-switch {
min-width: 75px !important;
border-radius: 0px var(--radius-sm) var(--radius-sm) 0px !important;
}
.corpo-interno__configurar__linha__etapa__group__titulo {
font-size: var(--font-size-4xl);
font-weight: 700;
margin-bottom: 15px;
color: var(--text);
}
.corpo-interno__linha-inferior {
overflow: hidden;
width: 100%;
display: flex;
justify-content: center;
}
/* ===== TABS INFORMAÇÕES ===== */
.corpo-interno__configurar__tabs {
margin-bottom: 15px;
}
.corpo-interno__configurar__label {
font-weight: 700;
margin-bottom: 8px;
display: inline-block;
position: relative;
color: var(--text);
font-size: var(--font-size-lg);
}
.corpo-interno__configurar__label__info {
margin-left: 8px;
color: var(--muted);
}
.corpo-interno__configurar__label__button {
padding: 6px 12px;
font-weight: 600;
font-size: var(--font-size-sm);
border-radius: var(--radius-sm);
color: #fff;
background-color: var(--brand-500);
margin: 2px;
position: absolute;
top: -6px;
right: -110px;
cursor: pointer;
transition: background 0.2s;
}
.corpo-interno__configurar__label__button:hover {
background-color: var(--brand-600);
}
.linha-campos>span {
float: left;
width: 80px;
font-size: var(--font-size-lg);
font-weight: 700;
font-family: var(--font-sans);
margin-top: 12px;
}
.corpo-interno__configurar__tabs__tab {
overflow: hidden;
border: 1px solid var(--border);
background-color: var(--surface-2);
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.corpo-interno__configurar__tabs__itens {
display: none;
overflow: hidden;
border: 1px solid var(--border);
border-top: none;
background-color: var(--surface-2);
padding: 20px;
border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.corpo-interno__configurar__tabs__itens__item {
padding: 12px;
margin-bottom: 10px;
color: var(--text);
user-select: none;
transition: all 0.2s;
background-color: var(--surface);
border-radius: var(--radius-sm);
cursor: pointer;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
}
.corpo-interno__configurar__tabs__itens__item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.corpo-interno__configurar__tabs__tab__botao {
background-color: transparent;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 20px;
transition: 0.2s;
color: var(--text-2);
font-weight: 600;
font-size: var(--font-size-lg);
}
.corpo-interno__configurar__tabs__tab__botao:hover {
background-color: rgba(0, 146, 63, 0.08);
color: var(--brand-600);
}
.corpo-interno__configurar__tabs__tab__botao--ativo {
background-color: var(--brand-50);
color: var(--brand-700);
border-bottom: 2px solid var(--brand-500);
}
.itens-tab {
display: flex;
flex-flow: wrap;
gap: 8px;
}
.itens-tab>span {
padding: 15px;
cursor: pointer;
}
.formulario_ativo {
background-color: var(--brand-500);
transition: background 0.2s;
}
.formulario_ativo:hover {
background-color: var(--brand-600);
}
.formulario_inativo {
background-color: #f59e0b;
transition: background 0.2s;
}
.formulario_inativo:hover {
background-color: #d97706;
}
.formulario_adicionar {
background-color: var(--brand-500);
transition: background 0.2s;
}
.formulario_adicionar:hover {
background-color: var(--brand-600);
}
.previaImagem__placeholder {
position: relative;
display: inline-block;
}
#previaImagem {
width: 320px;
border-radius: var(--radius-md);
background-color: var(--surface);
box-shadow: var(--shadow-md);
border: 1px solid var(--border);
}
.previaImagem__editar {
position: absolute;
content: '';
top: 0px;
right: 0px;
opacity: 0.8;
}
.previaImagem__editar__apagar {
position: absolute;
right: -30px;
top: calc(50% - 17px);
border-radius: 50%;
background-color: #ef4444;
height: 16px;
width: 16px;
color: #fff;
cursor: pointer;
padding: 1.5px 4.4px;
font-size: var(--font-size-sm);
transition: transform 0.2s, background-color 0.2s;
}
.previaImagem__editar__apagar:hover {
transform: scale(1.1);
background-color: #dc2626;
}
/* ===== SWEET ALERT ===== */
.swal2-popup {
max-width: 85% !important;
}
#swal2-content {
display: block;
max-width: 1000px;
margin: 0 auto;
}
/* ===== BOTOES ===== */
.botao {
display: inline-block;
font-weight: 600;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: 10px 20px;
font-size: var(--font-size-lg);
border-radius: var(--radius-sm);
transition: all 0.2s;
cursor: pointer;
min-width: 100px;
}
.botao--ativo {
background-color: var(--brand-500);
color: #fff;
}
.botao--ativo:hover {
background-color: var(--brand-600);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.botao--inativo {
background-color: #f59e0b;
color: #fff;
}
.botao--inativo:hover {
background-color: #d97706;
color: #fff;
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.botao--peq {
min-width: 30px;
padding: 6px 12px;
}
.botao--gde {
min-width: 120px;
height: 40px;
margin-top: 25px;
padding: 12px 24px;
}
.botao--informacao {
background-color: var(--brand-500);
color: #fff;
}
.botao--informacao:hover {
background-color: var(--brand-600);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.botao__icone {
margin-right: 8px;
}
/* ===== ICONES ===== */
.icone {
transition: all 0.2s;
cursor: pointer;
height: var(--font-size-4xl);
width: var(--font-size-4xl);
}
.icone--no-transition {
transition: none !important;
}
.icone--ativo {
color: var(--brand-500);
}
.icone--ativo:hover {
color: var(--muted);
transform: scale(1.1);
}
.icone--inativo {
color: var(--muted);
}
.icone--inativo:hover {
color: var(--brand-500);
transform: scale(1.1);
}
.icone--alerta {
color: #f59e0b;
}
.icone--alerta:hover {
color: #d97706;
transform: scale(1.1);
}
.icone--atencao {
color: #ef4444;
}
.icone--atencao:hover {
color: #dc2626;
transform: scale(1.1);
}
.icone--sucesso {
color: var(--brand-500);
}
.icone--sucesso:hover {
color: var(--brand-600);
transform: scale(1.1);
}
/* ===== INPUT GROUP ===== */
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
.input-group__addon {
padding: 8px 14px;
font-size: var(--font-size-lg);
font-weight: 600;
line-height: 1;
color: var(--text-2);
text-align: center;
background-color: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.input-group__addon, .input-group__addon__btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.input-group__addon, .input-group__addon__btn, .input-group .form-control {
display: table-cell;
}
.input-group .form-control:first-child, .input-group-addon:first-child, .input-group__addon__btn:first-child>.btn, .input-group__addon__btn:first-child>.btn-group>.btn, .input-group__addon__btn:first-child>.dropdown-toggle, .input-group__addon__btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group__addon__btn:last-child>.btn-group:not(:last-child)>.btn {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
/* ===== HELPER'S ===== */
.fa-times {
font-size: 1em !important;
}
.fa-edit {
font-size: 0.8em !important;
}
.tooltip-balao {
font-family: var(--font-sans);
position: absolute;
width: 145px;
padding: 6px 10px;
text-align: center;
color: #FFF;
box-shadow: var(--shadow-md);
border-radius: var(--radius-sm);
font-size: var(--font-size-md);
background-color: rgba(0, 0, 0, 0.9);
z-index: 999;
}
/* ===== FORMAS ===== */
.circulo {
border-radius: 50%;
display: inline-block;
width: 8px;
height: 8px;
margin-right: 10px;
}
.circulo--ativo {
background-color: var(--brand-600);
}
.circulo--inativo {
background-color: #ef4444;
}
/* ===== MODAL ===== */
.modal-body {
position: relative;
padding: 20px;
overflow: hidden;
}
.modal-footer {
margin: 0px 20px 20px 20px;
overflow: hidden;
}
.input-group .form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
box-shadow: var(--shadow-xs);
}
.form-control {
display: block;
width: 100%;
height: var(--input-height-lg);
padding: 8px 14px;
font-size: var(--input-font-lg);
line-height: 1.5;
color: var(--text);
background-color: var(--surface);
background-image: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
border-color: var(--brand-500);
outline: none;
border: 2px solid var(--brand-500);
}
.input-group-addon, .input-group__addon__btn {
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.coluna-1 {
width: 10%;
}
.coluna-1--s {
width: 5%;
}
.coluna-2 {
width: 20%;
}
.coluna-3 {
width: 30%;
}
.coluna-4 {
width: 40%;
}
/* ===== ANIMATIONS ===== */
.animate {
animation: ripple-mo 0.4s cubic-bezier(0, 0, 0.2, 1);
}
.animate--loop {
animation: pulse 1.5s cubic-bezier(0.4, 0, 1, 1) infinite;
}
@keyframes ripple-mo {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1.1);
opacity: 0.6;
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.esconde {
display: none;
}
/* ===== CONT-NAV (Navigation Container) ===== */
.cont-nav {
width: 100%;
margin: 30px 0;
float: left;
}
.cont-nav section div {
padding: 0 10px;
width: 100%;
border: 0 solid var(--border);
background: var(--surface);
line-height: 1.5em;
letter-spacing: 0.3px;
color: var(--text-2);
float: left;
}
.cont-nav p {
margin: 0;
}
.cont-nav .grid-4 {
width: 33.33%;
}
.cont-nav .grid-6 {
width: 50%;
}
.cont-nav .grid-8 {
width: 66.66666664%;
}
.cont-nav .item-pg {
float: left;
width: 100%;
color: var(--brand-500);
padding: 0;
margin: 0 0 25px 0;
border-bottom: 4px solid var(--surface-2);
padding-bottom: 30px;
}
.cont-nav hr {
float: left;
border: 0;
width: 100%;
border-bottom: 2px solid var(--muted);
margin: 15px 0;
}
.box-button {
margin-top: 30px;
text-align: center;
}
.cont-nav div.anuncio {
position: relative;
float: right;
margin-top: -20px;
z-index: 10;
}
.cont-nav .anuncio h1 {
font-family: var(--font-sans);
font-weight: normal;
color: #3035c6;
font-size: var(--font-size-4xl);
}
.cont-nav .anuncio span {
font-family: var(--font-sans);
font-weight: normal;
color: #006621;
font-size: var(--font-size-xl);
}
.cont-nav .anuncio p {
font-family: var(--font-sans);
font-weight: normal;
color: #545454 !important;
font-size: var(--font-size-xl);
}
.cont-nav div.anuncio:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-image: linear-gradient(to left, var(--surface), transparent);
}
.cont-nav.pc-social input {
width: 95%;
}
.cont-nav .pc-social i {
float: left;
width: 26px;
font-size: 21px;
margin: 0 10px;
line-height: 2;
}
.cont-nav .pc-social div {
margin: 0;
padding: 0;
}
.cont-nav .item-pg h3 {
margin: 0 0 4px 0;
font-weight: bold;
font-family: var(--font-sans);
font-size: var(--font-size-3xl);
}
.cont-nav .item-pg p {
text-transform: none;
color: var(--text);
}
/* ===== PAGINAS EXTRAS ===== */
.paginas-extras ul {
float: left;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.paginas-extras li {
border: 1px solid var(--border);
float: left;
width: 100%;
padding: 0 5px;
margin: 0;
margin-bottom: 10px;
line-height: 45px;
position: relative;
transition: border-color 0.3s;
}
.paginas-extras li:hover {
border-color: #666;
}
.paginas-extras button {
float: right;
background: var(--brand-500);
color: var(--surface);
border: 0;
min-width: 80px;
padding: 10px;
border-radius: var(--radius-sm);
margin: 5px 3px;
text-align: center;
text-decoration: none;
height: 34px;
cursor: pointer;
transition: background 0.2s;
}
.paginas-extras button:hover {
background: var(--brand-700);
}
.paginas-extras .status_menu {
float: right;
color: #900;
margin-right: 5px;
}
/* ===== PC-TAB ===== */
.pc-tab ul {
list-style: none;
margin: 0;
padding: 0;
}
.div-espaco {
margin-bottom: 25px;
}
/* ===== CONT-NAV2 (Paginas Editar) ===== */
.cont-nav2 {
width: 100%;
margin: 30px 0;
float: left;
line-height: 1.5em;
letter-spacing: 0.3px;
}
.cont-nav2 p {
margin: 0;
}
.cont-nav2 .grid-4 {
width: 33.33%;
}
.cont-nav2 .grid-6 {
width: 50%;
}
/* ===== LISTAGEM (Banners) ===== */
.bn_numero {
float: left;
text-align: center;
width: 50px;
font-size: 19px;
font-weight: bold;
}
.bn_titulo {
float: left;
width: calc(100% - 150px);
background-color: var(--surface-2);
padding: 0 20px;
}
.bn_titulo strong {
font-size: var(--font-size-xl);
}
.btn-green:hover {
transition: all 0.4s;
background: var(--text);
}
.bn_naoutilizado {
font-weight: bold;
font-family: var(--font-sans);
position: absolute;
width: 100%;
height: 100%;
text-align: center;
background: rgba(255, 255, 255, 0.8);
z-index: 99;
}
/* ===== RESPONSIVE - CONT-NAV & CONT-NAV2 ===== */
@media only screen and (max-width: 719px) {
.cont-nav .grid-mob100 {
width: 100%;
}
.cont-nav2 .grid-mob100 {
width: 100%;
}
}
/* imobiliarias/css/nav/styles.css */
.menu-add-modulo {
font-size: var(--font-size-lg);
color: var(--text-2);
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
box-sizing: border-box;
font-family: var(--font-sans);
}
#cssmenu:after,
#cssmenu>ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
z-index: 0;
}
#cssmenu #menu-button {
display: block;
float: left;
width: 100%;
height: auto;
position: absolute;
}
#cssmenu #menu-button i {
font-size: var(--font-size-4xl);
position: absolute;
right: 12px;
top: 6px;
display: none;
}
#cssmenu {
float: left;
width: auto;
min-height: 55px;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
}
#cssmenu>ul {
float: left;
width: 100%;
}
#cssmenu.align-right>ul>li {
float: right;
}
#cssmenu a:hover {
background: var(--surface-2);
}
#cssmenu>ul>li {
float: left;
display: inline-block;
}
#cssmenu.align-center>ul {
float: none;
text-align: center;
}
#cssmenu.align-center>ul>li {
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu>ul>li>a {
padding: 10px 16px;
color: #fff;
font-size: var(--font-size-lg);
font-weight: 400;
letter-spacing: 0.2px;
text-transform: none;
text-decoration: none;
text-align: center;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
border-right: 0;
border-radius: 6px;
margin: 6px 2px;
display: flex;
align-items: center;
align-content: center;
flex-wrap: nowrap;
flex-direction: row;
min-height: 36px;
}
#cssmenu>ul>li.active>a {
color: rgba(255, 255, 255, 0.9);
}
#cssmenu>ul>li.has-sub.active>a::after,
#cssmenu>ul>li.has-sub:hover>a {
color: #fff;
}
#cssmenu>ul>li:hover>a,
#cssmenu>ul>li>a:hover,
#cssmenu>ul>li.active>a {
color: #fff;
font-weight: normal;
background: var(--brand-500);
}
#cssmenu>ul>li.has-sub>a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
right: 20px;
top: 32px;
z-index: 10;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 60px;
padding-top: 0;
font-size: var(--font-size-lg);
opacity: 1;
transition: top 0.2s ease, opacity 0.2s ease-in;
z-index: 9999;
background: var(--surface);
}
#cssmenu.align-right ul ul {
text-align: right;
}
.cssmenu--icone {
width: 20px;
}
#cssmenu>ul>li>ul::after {
top: 16px;
left: 20px;
}
#cssmenu.align-right>ul>li>ul::after {
left: auto;
right: 20px;
}
#cssmenu ul ul ul::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
border-right-color: var(--surface);
top: 11px;
left: -4px;
}
#cssmenu.align-right ul ul ul::after {
border-right-color: transparent;
border-left-color: var(--surface);
left: auto;
right: -4px;
}
#cssmenu>ul>li>ul {
top: 120px;
background: transparent;
}
#cssmenu>ul>li:hover>ul {
top: 52px;
left: 0;
opacity: 1;
}
#cssmenu.align-right>ul>li:hover>ul {
left: auto;
right: 0;
}
#cssmenu ul ul ul {
padding-top: 0;
padding-left: 6px;
}
#cssmenu.align-right ul ul ul {
padding-right: 6px;
}
#cssmenu ul ul>li:hover>ul {
left: 180px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul>li:hover>ul {
left: auto;
right: 100%;
opacity: 1;
}
#cssmenu ul ul li a {
text-decoration: none;
font-weight: normal;
padding: 8px 18px;
min-width: 182px;
border: 0;
box-shadow: var(--shadow-sm);
}
#cssmenu ul ul li:hover>a,
#cssmenu ul ul li.active>a {
color: var(--text);
}
#cssmenu ul ul li:first-child>a {
border-top: 3px solid var(--brand-500);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#cssmenu ul ul li:last-child>a {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#cssmenu>ul>li>ul::after {
position: absolute;
display: block;
}
#cssmenu ul ul li.has-sub>a::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: var(--muted);
right: 17px;
top: 14px;
}
#cssmenu.align-right ul ul li.has-sub>a::after {
border-left-color: transparent;
border-right-color: var(--muted);
right: auto;
left: 17px;
}
#cssmenu ul ul li.has-sub.active>a::after,
#cssmenu ul ul li.has-sub:hover>a::after {
border-left-color: var(--text);
}
#cssmenu.align-right ul ul li.has-sub.active>a::after,
#cssmenu.align-right ul ul li.has-sub:hover>a::after {
border-right-color: var(--text);
border-left-color: transparent;
}
@media all and (max-width: 375px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 800px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 800px),
only screen and (min-resolution: 192dpi) and (max-width: 800px),
only screen and (min-resolution: 2dppx) and (max-width: 800px) {
/* ============================================
MATERIAL DESIGN 3 - MENU MOBILE
============================================ */
/* Botão menu hamburger */
#cssmenu #menu-button i {
display: inline !important;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Container principal */
#cssmenu {
background: var(--brand-500) !important;
width: 100% !important;
min-height: auto;
justify-content: flex-start;
}
/* Lista principal */
#cssmenu>ul {
display: none;
}
#cssmenu>ul.open {
display: flex !important;
flex-flow: column nowrap;
border-top: 0;
}
/* Responsivo Order */
#menuItem_CRM {
order: 1;
}
#menuItem_Msg {
order: 2;
border-bottom: 4px solid var(--brand-700) !important;
}
#menuItem_Relatorios {
order: 3;
}
#menuItem_conf {
order: 4;
}
#menuItem_design {
order: 5;
}
#menuItem_Modulos {
order: 6;
}
/* Itens do menu principal mobile */
#cssmenu>ul>li,
#cssmenu.align-right>ul>li {
float: none !important;
display: block !important;
background: var(--brand-500) !important;
}
/* Links do menu principal - Material Design 3 */
#cssmenu>ul>li>a {
padding: 14px 20px !important;
border-right: 0 !important;
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500 !important;
letter-spacing: 0.25px !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
border-radius: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
min-height: 48px !important;
}
/* Hover no menu principal mobile */
#cssmenu>ul>li:hover>a,
#cssmenu>ul>li.active>a {
background: rgba(0, 0, 0, 0.12) !important;
color: #fff !important;
font-weight: 500 !important;
}
/* Botão menu hamburger */
#cssmenu #menu-button {
display: block !important;
text-decoration: none !important;
font-size: var(--font-size-lg);
font-weight: 600 !important;
color: #fff !important;
text-align: center !important;
padding: 18px 30px 30px 40px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
cursor: pointer !important;
margin-top: -48px !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Submenus container mobile */
#cssmenu ul ul,
#cssmenu ul li:hover>ul,
#cssmenu>ul>li>ul,
#cssmenu ul ul ul,
#cssmenu ul ul li:hover>ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul li:hover>ul,
#cssmenu.align-right>ul>li>ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul ul li:hover>ul {
left: 0 !important;
right: auto !important;
top: auto !important;
opacity: 1 !important;
width: 100% !important;
padding: 4px 0 !important;
position: relative !important;
text-align: left !important;
border-radius: 0 !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
/* Itens do submenu mobile */
#cssmenu ul ul li {
width: 100% !important;
}
/* Links do submenu - Material Design 3 */
#cssmenu ul ul li a {
width: 100% !important;
box-shadow: none !important;
padding: 12px 24px !important;
font-size: var(--font-size-xl) !important;
font-weight: 400 !important;
border-radius: 0 !important;
border-left: 3px solid transparent !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
}
/* Hover no submenu mobile - SEM underline */
#cssmenu ul ul li a:hover,
#cssmenu ul ul li:hover>a,
#cssmenu ul ul li.active>a {
background: var(--brand-500) !important;
color: #fff !important;
text-decoration: none !important;
border-left-color: rgba(255, 255, 255, 0.5) !important;
}
/* Primeiro item do submenu */
#cssmenu ul ul li:first-child>a {
border-top: none !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
/* Último item do submenu */
#cssmenu ul ul li:last-child>a {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* Submenus aninhados */
#cssmenu ul ul ul li a {
padding-left: 40px !important;
}
/* Ocultar setas CSS no mobile */
#cssmenu>ul>li.has-sub>a::after,
#cssmenu ul ul li.has-sub>a::after {
display: none !important;
}
/* Ícone Lucide no mobile */
#cssmenu>ul>li.has-sub>a .lucide-chevron-down {
display: none;
}
#cssmenu>ul>li.has-sub:hover>a .lucide-chevron-down {
stroke: #fff !important;
}
/* Hover genérico */
#cssmenu a:hover {
background: rgba(0, 0, 0, 0.12) !important;
}
/* ============================================
CLASSES ESPECIAIS - MOBILE
============================================ */
/* Menu Add Módulo - Mobile */
.menu-add-modulo,
#cssmenu ul ul li a.menu-add-modulo {
background: var(--brand-700) !important;
border-radius: 6px !important;
margin: 8px 12px !important;
padding: 12px 16px !important;
box-shadow: var(--shadow-sm) !important;
font-weight: 500 !important;
min-width: auto !important;
width: auto !important;
}
#cssmenu ul ul li a.menu-add-modulo:hover {
background: var(--brand-500) !important;
box-shadow: var(--shadow-md) !important;
}
/* Menu Destaque - Mobile */
#cssmenu ul ul li a.menu-destaque {
background: linear-gradient(90deg, var(--brand-800), var(--brand-500), var(--brand-800)) !important;
background-size: 200% 100% !important;
animation: gradientShift 8s ease-in-out infinite !important;
color: #fff !important;
border-radius: 6px !important;
margin: 8px 12px !important;
padding: 12px 16px !important;
border-left: none !important;
font-weight: 500 !important;
min-width: auto !important;
width: auto !important;
}
#cssmenu ul ul li a.menu-destaque:hover {
background: linear-gradient(90deg, var(--brand-900), var(--brand-600), var(--brand-900)) !important;
background-size: 200% 100% !important;
}
/* Beta Badge - Mobile (garantir visibilidade) */
.beta-badge {
font-size: var(--font-size-xxs) !important;
padding: 2px 5px !important;
margin-left: 6px !important;
}
/* Alinhamentos */
#cssmenu.align-right>ul {
float: none !important;
}
#cssmenu.align-center>ul {
text-align: left !important;
}
/* Mensagens padding */
#cssmenumsg {
padding-bottom: 15px !important;
padding-top: 15px !important;
}
}
/* ============================================
MENU MATERIAL DESIGN - #cssmenu
Hover sutil com animações Material Design
============================================ */
/* Remove background - header já tem */
#cssmenu {
background: transparent;
box-shadow: none;
}
#cssmenu>ul>li>a>span {
color: #fff;
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* HOVER - SOMENTE quando hover ativo */
#cssmenu>ul>li:hover>a {
background-color: rgba(0, 0, 0, 0.12);
color: #fff;
border-radius: 6px;
}
/* .active COM hover - aplica fundo */
#cssmenu>ul>li.active:hover>a {
background-color: rgba(0, 0, 0, 0.12);
color: #fff;
}
#cssmenu>ul>li:hover>a>span {
color: #fff;
}
/* ÍCONE LUCIDE - Seta dropdown */
#cssmenu>ul>li.has-sub>a::after {
content: none;
}
#cssmenu>ul>li.has-sub>a .lucide-chevron-down {
width: 16px;
height: 16px;
margin-left: 4px;
stroke: rgba(255, 255, 255, 0.5);
stroke-width: 2;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
#cssmenu>ul>li.has-sub:hover>a .lucide-chevron-down {
transform: rotate(180deg);
stroke: rgba(255, 255, 255, 0.9);
}
/* ============================================
SUBMENU / DROPDOWN - Material Design
============================================ */
#cssmenu ul ul {
background: var(--surface);
border-radius: 8px;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
#cssmenu>ul>li>ul {
top: 48px;
background: var(--surface);
}
#cssmenu>ul>li:hover>ul {
top: 48px;
left: 0;
opacity: 1;
}
/* Remove borda verde do primeiro item */
#cssmenu ul ul li:first-child>a {
border-top: none;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
#cssmenu ul ul li:last-child>a {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
/* Itens do submenu */
#cssmenu ul ul li a {
padding: 10px 16px;
color: var(--text-2);
font-size: var(--font-size-lg);
font-weight: 400;
box-shadow: none;
border-left: 3px solid transparent;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 220px;
}
#cssmenu ul ul li a:hover,
#cssmenu ul ul li:hover>a {
background-color: rgba(0, 146, 63, 0.08);
color: var(--brand-500);
border-left-color: var(--brand-500);
}
/* Item Adicionar Módulo */
#cssmenu ul ul li a.menu-add-modulo {
background: var(--brand-500);
color: #fff;
font-weight: 500;
border-radius: 6px;
margin: 8px 12px 4px 12px;
padding: 10px 14px;
border-left: none;
min-width: auto;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#cssmenu ul ul li a.menu-add-modulo:hover {
background: var(--brand-600);
color: #fff;
border-left: none;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 146, 63, 0.3);
}
/* ============================================
CLASSE .menu-destaque - Itens destacados
============================================ */
#cssmenu ul ul li.menu-destaque {
background: linear-gradient(90deg, var(--brand-800), var(--brand-500), var(--brand-800));
background-size: 200% 100%;
animation: gradientShift 8s ease-in-out infinite;
color: #fff;
position: relative;
overflow: hidden;
border-left: none;
min-width: auto;
font-weight: 500;
}
#cssmenu ul ul li.menu-destaque>a {
color: #fff;
}
#cssmenu ul ul li.menu-destaque::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: shimmer 2s infinite;
pointer-events: none;
}
#cssmenu ul ul li.menu-destaque:hover {
color: #fff;
background: linear-gradient(90deg, var(--brand-900), var(--brand-600), var(--brand-900));
background-size: 200% 100%;
border-left: none;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 146, 63, 0.4);
}
/* ============================================
CLASSE .beta-badge - Label BETA
============================================ */
.beta-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
color: #fff;
font-size: var(--font-size-xxs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 2px 6px;
border-radius: 4px;
margin-left: 8px;
vertical-align: middle;
box-shadow: 0 1px 3px rgba(255, 152, 0, 0.3);
animation: pulse-badge 2s ease-in-out infinite;
}
@keyframes pulse-badge {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.85;
transform: scale(0.98);
}
}
/* Variantes do badge */
.beta-badge.badge-novo {
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-800) 100%);
box-shadow: 0 1px 3px rgba(0, 146, 63, 0.3);
}
.beta-badge.badge-em-breve {
background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
box-shadow: 0 1px 3px rgba(156, 39, 176, 0.3);
}
.beta-badge.badge-laranja {
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
box-shadow: 0 1px 3px rgba(255, 152, 0, 0.3);
animation: pulse-badge 2s ease-in-out infinite;
}
/* Keyframes para animações */
@keyframes gradientShift {
0% {
background-position: 0% center;
}
50% {
background-position: 100% center;
}
100% {
background-position: 0% center;
}
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* imobiliarias/css/site/styles.css */
/* NOTE: body element styles consolidated at line ~95 */
/* NOTE: * (universal selector) styles consolidated at line ~95 */
.container {
max-width: 1400px;
margin: 0 auto;
}
/*========= Header ==========*/
header {
float: left;
width: 100%;
background: var(--brand-500);
}
.logo {
float: left;
margin: 5px 20px 0 0;
}
section {
float: left;
width: 100%;
}
/* NOTE: a (anchor) element styles consolidated at line ~95 */
.menu a {
color: #fff;
font-weight: normal;
}
.sub-menu .container {
margin: 0 auto;
}
.sub-menu a {
text-decoration: none;
}
.sub-menu {
color: var(--text-2);
width: 100%;
float: left;
background: var(--surface);
box-shadow: var(--shadow-md);
margin: 0 0 10px 0;
}
.sub-menu ul {
float: left;
margin: 0;
padding: 0;
}
.sub-menu li {
display: inline;
float: left;
padding: 12px 10px;
list-style: none;
background: var(--surface);
border-right: 1px solid var(--border);
}
.sub-menu li:last-child {
border-right: none;
}
.sub-menu i {
color: var(--accent-yellow);
}
.tp-submenu-partemenu ul {
display: flex;
text-align: center;
align-items: center;
}
/* Style Usuario / Avatar */
.tp-submenu-partemenu {
width: calc(100% - 290px);
display: inline-block;
flex: auto;
vertical-align: middle;
}
.tp-submenu-persona {
width: 230px;
display: inline-block;
vertical-align: middle;
}
.tp-submenu-persona_User {
display: flex;
justify-content: left;
align-items: center;
white-space: nowrap;
padding: 5px 0;
text-align: center;
}
.tp-submenu-persona_User_Img {
margin-right: 10px;
width: 40px;
height: 40px;
}
.tp-submenu-persona_User_Img img {
display: block;
height: inherit;
width: inherit;
border-radius: 46%;
object-fit: cover;
}
.tp-submenu-persona_User_Text {
flex-direction: column;
text-align: left;
overflow: hidden;
}
.tp-submenu-persona_User_Text span {
display: block;
}
.tp-submenu-persona_User_Text small {
font-size: var(--font-size-md);
line-height: 14px;
opacity: 0.5;
}
.tp-submenu-User-fa {
font-size: 30px;
color: var(--border) !important;
line-height: 38px;
}
.tp-submenu-persona-Link {
position: relative;
}
#tp_submenu-persona_User_Img-2 {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 45px;
border-radius: 7%;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
z-index: 10;
}
a.tp-submenu-persona-Link:hover #tp_submenu-persona_User_Img-2 {
visibility: visible;
opacity: 1;
}
@media only screen and (max-width: 719px) {
.tp-submenu-partemenu {
width: 100%;
}
.tp-submenu-persona {
width: calc(100% - 55px);
padding: 5px;
}
.ct_topo-nov {
display: none;
}
}
/* Style Usuario / Avatar */
/*========= Footer ==========*/
footer {
float: left;
width: 100%;
background: var(--brand-500);
padding: 0;
color: #fff;
margin: 0;
}
footer .container div:nth-child(1) {
width: 20%;
float: left;
padding: 5px 0;
height: 60px;
}
footer .container div:nth-child(2) {
width: 50%;
float: left;
margin: 0;
margin-top: 15px;
}
footer .container div:nth-child(3) {
width: 30%;
float: right;
height: 60px;
}
.social {
padding: 10px 0;
}
.social i {
background: var(--surface);
color: var(--brand-500);
text-align: center;
width: 38px;
height: 38px;
font-size: 21px;
border-radius: 100%;
line-height: 2;
vertical-align: middle;
margin: 0 2px;
}
#return-to-top {
opacity: 0.5;
position: fixed;
bottom: 10px;
right: 20px;
background: var(--brand-500);
width: 50px;
height: 50px;
display: none;
text-decoration: none;
border-radius: 35px;
transition: all 0.3s ease;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 15px;
font-size: 19px;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: var(--brand-600);
}
#return-to-top:hover i {
color: #fff;
top: 10px;
}
/* ============================================
CONTENT LAYOUT - Consolidated Styles
Main content area styles for the application
This section consolidates all .conteudo and
.corpo .conteudo definitions to eliminate
conflicts and provide a single source of truth.
============================================ */
/* Base content container */
.conteudo {
background: var(--surface);
min-height: 500px;
}
/* Content within corpo wrapper */
.corpo .conteudo {
display: flow-root;
/* Creates block formatting context to contain floated children */
width: 100%;
padding: 10px 20px;
margin: 0 0 10px 0;
box-shadow: var(--shadow-md);
}
/* Responsive: Mobile adjustments for content layout */
@media only screen and (max-width: 768px) {
.corpo .conteudo {
padding: 10px 0;
/* Remove horizontal padding on mobile */
margin: 0 0 10px 0;
box-shadow: var(--shadow-none);
}
.corpo .conteudo .card {
float: left;
width: 100%;
background: var(--surface);
padding: 0;
min-height: 180px;
box-shadow: var(--shadow-md);
margin: 0;
}
}
/* ============================================
CARD COMPONENT
============================================ */
.card {
float: left;
width: 100%;
background: var(--surface);
padding: 10px 20px;
min-height: 180px;
box-shadow: var(--shadow-md);
margin: 0 0 10px 0;
}
/*========= Conteudo mobile 719px ==========*/
@media only screen and (max-width: 719px) {
.logo {
margin: 3px;
}
.menu {
width: 100%;
}
.corpo .container {
padding: 10px;
}
/* NOTE: .corpo .conteudo .card mobile styles consolidated at 768px breakpoint above */
.sub-menu .container {
margin: 0 auto;
}
.sub-menu a {
text-decoration: none;
}
.sub-menu {
color: var(--text-2);
width: 100%;
float: left;
background: var(--surface);
box-shadow: var(--shadow-md);
}
.sub-menu ul {
float: left;
margin: 0;
padding: 0;
font-size: var(--font-size-3xl);
}
.sub-menu li {
float: left;
padding: 10px 8px;
}
.sub-menu i {
color: var(--accent-yellow);
}
i.fa.fa-graduation-cap,
i.fa.fa-television,
i.fa.fa-sign-out {
display: none;
}
/*========= Footer ==========*/
footer {
float: left;
width: 100%;
background: var(--brand-500);
padding: 10px;
color: #fff;
}
footer .container div:nth-child(1) {
width: 100%;
float: left;
}
footer .container div:nth-child(2) {
width: 100%;
float: left;
font-size: var(--font-size-sm);
}
footer .container div:nth-child(3) {
width: 100%;
float: right;
}
.tp-submenu-partemenu ul {
flex-wrap: wrap;
}
}
@media only screen and (max-width: 1100px) {
.ct2_verSite {
display: none;
}
}
/* ============================================
PACOTES ADICIONAIS - MARKETPLACE
Integrated from pacotes_adicionais_listar.css
============================================ */
/* Layout Principal Moderno */
.modern-marketplace-container {
background: var(--surface);
margin: -10px -20px;
overflow: hidden;
}
.modern-layout {
display: flex;
min-height: 600px;
}
@media (max-width: 768px) {
.modern-marketplace-container {
margin: -20px;
}
.modern-layout {
flex-direction: column;
}
}
/* Alert Section Compact */
.modern-alert-section.compact {
background: var(--surface);
border-radius: 12px;
margin: 24px 20px;
border: 1px solid var(--border);
overflow: hidden;
transition: all 0.3s ease;
}
.modern-alert-section.compact .alert-header {
background: var(--surface-2);
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--border);
}
.modern-alert-section.compact .alert-title {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
}
.modern-alert-section.compact .alert-title h2 {
margin: 0;
font-size: var(--font-size-xl);
font-weight: 600;
color: var(--text);
}
.modern-alert-section.compact .alert-count {
background: var(--muted);
color: #fff;
padding: 4px 10px;
border-radius: 16px;
font-size: var(--font-size-sm);
font-weight: 600;
min-width: 20px;
text-align: center;
backdrop-filter: blur(10px);
}
.modern-alert-section.compact .alert-content {
padding: 0;
background: var(--surface);
}
/* Requests List */
.requests-list {
display: flex;
flex-direction: column;
}
.request-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
transition: all 0.3s ease;
position: relative;
}
.request-item:last-child {
border-bottom: none;
}
.request-item:hover {
background: var(--surface-2);
transform: translateX(4px);
}
.request-main {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
}
.request-item .request-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #0284c7;
font-size: var(--font-size-3xl);
flex-shrink: 0;
}
.request-details {
flex: 1;
min-width: 0;
}
.request-header-info {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.request-item .ticket-number {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text);
font-family: 'Courier New', monospace;
background: var(--surface-2);
padding: 2px 8px;
border-radius: 4px;
}
.request-item .request-type {
font-size: var(--font-size-md);
color: var(--muted);
font-weight: 500;
background: var(--surface-2);
padding: 2px 8px;
border-radius: 12px;
border: 1px solid var(--border);
}
.request-item .status-badge {
padding: 3px 8px;
border-radius: 12px;
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.request-item .status-badge.pending {
background: #fef3c7;
color: #d97706;
border: 1px solid #fbbf24;
}
.request-item .request-message {
font-size: var(--font-size-lg);
color: var(--text-2);
line-height: 1.4;
margin: 4px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.request-meta {
margin-top: 6px;
}
.request-item .request-date {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-sm);
color: var(--muted);
}
.request-item .request-date i {
font-size: var(--font-size-xs);
}
.request-item .request-actions {
flex-shrink: 0;
margin-left: 16px;
}
.request-item .btn-view {
background: var(--surface-2);
color: var(--text-2);
padding: 6px 12px;
border-radius: 6px;
text-decoration: none;
font-size: var(--font-size-md);
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.request-item .btn-view:hover {
background: #0094e1;
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
/* Responsivo para Solicitações Compactas */
@media (max-width: 768px) {
.modern-alert-section.compact {
margin: 16px 10px;
border-radius: 8px;
}
.modern-alert-section.compact .alert-header {
padding: 12px 16px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.modern-alert-section.compact .alert-title h2 {
font-size: var(--font-size-xl);
}
.request-item {
padding: 12px 16px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.request-main {
width: 100%;
gap: 12px;
}
.request-item .request-icon {
width: 32px;
height: 32px;
font-size: var(--font-size-xl);
}
.request-header-info {
gap: 8px;
}
.request-item .request-actions {
width: 100%;
margin-left: 0;
}
.request-item .btn-view {
width: 100%;
justify-content: center;
}
}
/* Animação de entrada para itens */
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.request-item {
animation: slideInRight 0.3s ease forwards;
}
.request-item:nth-child(1) {
animation-delay: 0.1s;
}
.request-item:nth-child(2) {
animation-delay: 0.2s;
}
.request-item:nth-child(3) {
animation-delay: 0.3s;
}
.request-item:nth-child(4) {
animation-delay: 0.4s;
}
/* Sidebar Moderna de Categorias */
.categories-sidebar {
width: 280px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-right: 1px solid var(--border);
padding: 0;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
animation: slideInLeft 0.6s ease-out;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.sidebar-header {
padding: 24px 20px 20px;
border-bottom: 1px solid var(--border);
background: rgba(255, 255, 255, 0.9);
}
.sidebar-header h2 {
margin: 0;
font-size: var(--font-size-2xl);
font-weight: 600;
color: var(--brand-500);
display: flex;
align-items: center;
gap: 8px;
}
.categories-list {
padding: 16px 12px;
background: var(--surface-2);
}
.category-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin-bottom: 4px;
cursor: pointer;
transition: all 0.3s ease;
border: none;
background: none;
width: 100%;
text-align: left;
font-family: var(--font-sans);
font-size: var(--font-size-xl);
color: var(--muted);
border-radius: 8px;
position: relative;
}
.category-item:hover:not(.active) {
background: rgba(255, 255, 255, 0.7);
color: var(--text);
transform: translateX(2px);
}
.category-item.active {
background: var(--surface);
color: var(--brand-500);
box-shadow: var(--shadow-sm);
border-left: 3px solid var(--brand-500);
transform: translateX(2px);
}
.category-item i {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-3xl);
color: inherit;
}
.category-item span {
font-weight: 500;
}
.category-badge {
background: var(--surface-3);
color: var(--muted);
font-size: var(--font-size-sm);
padding: 2px 6px;
border-radius: 12px;
font-weight: 600;
width: 27px;
text-align: center;
transition: all 0.3s ease;
display: inline-block;
margin-left: auto;
}
.category-item.active .category-badge {
background: #dcfce7;
color: #16a34a;
}
.category-item:hover .category-badge {
background: var(--surface-2);
color: var(--text-2);
}
/* Área Principal */
.packages-main {
flex: 1;
padding: 0;
}
.main-header {
background: var(--surface);
padding: 24px 32px;
border-bottom: 1px solid var(--border);
margin-bottom: 0;
}
.main-title {
margin: 0 0 8px 0;
font-weight: 600;
color: var(--brand-500);
text-transform: uppercase;
border-bottom: 2px solid var(--border);
padding-bottom: 10px;
margin-bottom: 15px;
font-size: var(--font-size-3xl);
}
.main-subtitle {
margin: 0;
font-size: var(--font-size-xl);
color: var(--text-2);
}
.packages-content {
padding: 32px;
}
.packages-count {
padding: 16px 32px;
background: var(--bg);
font-size: var(--font-size-lg);
color: var(--text-2);
border-bottom: 1px solid var(--border);
margin: 0;
}
/* Grid de Pacotes */
.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 24px;
margin-bottom: 40px;
}
/* Cards dos Pacotes */
.package-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0;
transition: all 0.3s ease;
overflow: hidden;
position: relative;
}
.package-card:hover {
border-color: var(--brand-500);
box-shadow: 0 4px 12px rgba(0, 146, 63, 0.1);
transform: translateY(-2px);
}
.card-header {
padding: 6px 0px;
border-bottom: 1px solid var(--surface-2);
}
.card-icon {
width: 48px;
height: 48px;
background: var(--muted);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: #fff;
font-size: 20px;
}
.card-title {
font-size: var(--font-size-4xl);
font-weight: 600;
color: var(--text);
margin: 0 0 8px 0;
}
.card-description {
font-size: var(--font-size-xl);
color: var(--text-2);
line-height: 1.5;
margin: 0;
}
.card-badges {
display: flex;
gap: 8px;
margin: 16px 24px;
flex-wrap: wrap;
}
.package-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 16px;
font-size: var(--font-size-md);
font-weight: 500;
}
.badge-plan {
background: #e8f4fd;
color: #0094e1;
}
.badge-price {
background: #e8f5ec;
color: var(--brand-500);
font-weight: 600;
}
.badge-status-active {
background: #e8f5ec;
color: var(--brand-500);
}
.badge-status-available {
background: #f0f9ff;
color: #0284c7;
}
.badge-free {
background: #f0fdf4;
color: #16a34a;
}
/* Estilos para as badges de categoria/status */
.badge-categoria {
background: var(--surface-2);
color: var(--text-2);
font-size: var(--font-size-xs);
text-transform: uppercase;
font-weight: 600;
}
.badge-gratuito {
background: #dcfce7;
color: #16a34a;
font-weight: 600;
}
.badge-contratado {
background: #e8f5ec;
color: var(--brand-500);
font-weight: 600;
}
.card-features {
padding: 0 24px;
margin-bottom: 20px;
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
}
.features-list li {
display: flex;
align-items: center;
padding: 6px 0;
font-size: var(--font-size-lg);
color: var(--text-2);
}
.features-list li:before {
content: '✓';
color: var(--brand-500);
font-weight: bold;
margin-right: 8px;
width: 16px;
}
.card-footer {
padding: 20px 24px 24px;
border-top: 1px solid var(--surface-2);
}
.card-action {
width: 100%;
padding: 12px 24px;
border-radius: 6px;
font-size: var(--font-size-xl);
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
text-align: center;
display: inline-block;
}
.btn-primary {
background: var(--brand-500);
color: #fff !important;
}
.btn-primary:hover {
background: var(--brand-600);
transform: translateY(-1px);
}
.btn-active {
background: #e8f5ec;
color: var(--brand-500);
border: 1px solid var(--brand-500);
}
.btn-secondary {
background: var(--surface-2);
color: var(--text-2);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--surface-3);
}
.btn-disabled {
background: var(--surface-2) !important;
color: var(--inactive) !important;
}
.btn-disabled:hover {
background: var(--surface-2) !important;
color: var(--inactive) !important;
transform: none !important;
}
/* Estados dos Cards */
.card-active {
border-color: var(--brand-500);
background: #fafffe;
}
.card-active:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--brand-500), #0094e1);
}
/* Responsivo */
@media (max-width: 768px) {
.modern-layout {
flex-direction: column;
}
.categories-sidebar {
width: 100%;
height: auto;
position: relative;
}
.packages-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.packages-content {
padding: 16px;
}
.main-header {
padding: 16px;
}
}
@media (max-width: 480px) {
.main-title {
font-size: 24px;
}
.package-card {
margin-bottom: 16px;
}
}
/* Animações */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.packages-grid {
animation: fadeIn 0.6s ease-out;
}
/* Loading State */
.loading {
display: flex;
justify-content: center;
padding: 40px;
}
.loading::after {
content: '';
width: 32px;
height: 32px;
border: 3px solid var(--border);
border-top: 3px solid var(--brand-500);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Estilos Modernos para Seção de Pacotes Contratados */
.modern-contracted-section {
background: var(--surface);
border-radius: 12px;
margin: 24px 20px;
overflow: hidden;
border: 1px solid var(--border);
transition: all 0.3s ease;
}
.contracted-header {
background: linear-gradient(135deg, var(--brand-500) 0%, #16a34a 100%);
padding: 20px 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contracted-header::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.contracted-header:hover::before {
left: 100%;
}
.contracted-title {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
}
.contracted-title i {
font-size: 20px;
color: #dcfce7;
}
.contracted-title h2 {
margin: 0;
font-size: var(--font-size-4xl);
font-weight: 600;
color: #fff;
}
.contracted-count {
background: rgba(255, 255, 255, 0.2);
color: #fff;
padding: 4px 12px;
border-radius: 20px;
font-size: var(--font-size-md);
font-weight: 600;
min-width: 24px;
text-align: center;
backdrop-filter: blur(10px);
}
.contracted-header .icon-chevron {
color: #fff;
font-size: var(--font-size-3xl);
transition: transform 0.3s ease;
}
.contracted-content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
background: var(--surface-2);
}
.contracted-content.card-active {
max-height: 1000px;
padding: 24px;
}
.contracted-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
margin-bottom: 24px;
}
.contracted-card {
background: var(--surface);
border-radius: 8px;
padding: 20px;
border: 1px solid var(--border);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contracted-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--brand-500), #16a34a);
}
.contracted-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 146, 63, 0.15);
border-color: var(--brand-500);
}
.contracted-card-header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
}
.contracted-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #16a34a;
font-size: 20px;
flex-shrink: 0;
}
.contracted-info {
flex: 1;
}
.contracted-name {
margin: 0 0 8px 0;
font-size: var(--font-size-3xl);
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.contracted-status {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: #dcfce7;
color: #16a34a;
border-radius: 20px;
font-size: var(--font-size-md);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contracted-details {
display: flex;
flex-direction: column;
gap: 12px;
}
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.detail-item:last-child {
border-bottom: none;
}
.detail-label {
font-size: var(--font-size-lg);
color: var(--muted);
font-weight: 500;
}
.detail-value {
font-size: var(--font-size-xl);
color: var(--text);
font-weight: 600;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--muted);
}
.empty-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: var(--muted);
font-size: 32px;
}
.empty-state h3 {
margin: 0 0 12px 0;
font-size: var(--font-size-4xl);
font-weight: 600;
color: var(--text-2);
}
.empty-state p {
margin: 0;
font-size: var(--font-size-xl);
color: var(--muted);
line-height: 1.5;
max-width: 400px;
margin: 0 auto;
}
.contracted-footer {
background: var(--surface);
border-top: 1px solid var(--border);
padding: 16px 20px;
margin: 0 -24px -24px -24px;
}
.footer-info {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: var(--font-size-lg);
color: var(--muted);
line-height: 1.5;
}
.footer-info i {
color: #3b82f6;
margin-top: 2px;
flex-shrink: 0;
}
.support-link {
color: var(--brand-500);
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
}
.support-link:hover {
color: #16a34a;
text-decoration: underline;
}
/* Pending Payments Section */
.pending-payments-section {
background: var(--surface);
border-radius: 12px;
border: 1px solid var(--border);
overflow: hidden;
transition: all 0.3s ease;
margin-bottom: 24px;
}
.pending-header {
background: var(--surface-2);
padding: 20px 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.pending-header::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.pending-header:hover::before {
left: 100%;
}
.pending-title {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
}
.pending-title i {
font-size: 20px;
color: var(--text);
}
.pending-title h2 {
margin: 0;
font-size: var(--font-size-4xl);
font-weight: 600;
color: var(--text);
}
.pending-count {
background: #fef2f2;
color: #be123c;
padding: 4px 12px;
border-radius: 20px;
font-size: var(--font-size-md);
font-weight: 600;
min-width: 24px;
text-align: center;
backdrop-filter: blur(10px);
}
.pending-chevron {
color: #fff;
font-size: var(--font-size-3xl);
transition: transform 0.3s ease;
}
.pending-payment-chevron {
color: var(--text);
}
.pending-content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
background: var(--surface);
}
.pending-content.active {
max-height: 1000px;
padding: 24px;
}
.pending-table-wrapper {
overflow-x: auto;
}
.pending-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.pending-table th {
padding: 16px;
text-align: left;
border-bottom: 2px solid var(--border);
font-weight: 600;
color: var(--text);
}
.pending-table td {
padding: 16px;
border-bottom: 1px solid var(--border);
color: var(--text);
}
.pending-status {
display: inline-block;
padding: 6px 12px;
border-radius: 20px;
font-size: var(--font-size-md);
font-weight: 600;
background-color: #fef2f2;
color: #be123c;
}
.pending-pay-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background-color: var(--brand-500);
color: #fff !important;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
font-size: var(--font-size-xl);
transition: all 0.2s ease;
}
.pending-pay-button:hover {
background-color: var(--brand-600);
transform: translateY(-1px);
}
.pending-footer {
border-top: 1px solid var(--border);
padding: 16px 0 0;
margin-top: 20px;
}
.pending-info {
display: flex;
align-items: flex-start;
gap: 12px;
color: var(--muted);
font-size: var(--font-size-lg);
}
.pending-info i {
color: #dc3545;
margin-top: 2px;
}
@media (max-width: 768px) {
.pending-payments-section {
margin: 16px;
border-radius: 8px;
}
.pending-header {
padding: 16px 20px;
}
.pending-content.active {
padding: 16px;
}
.pending-table {
font-size: var(--font-size-xl);
}
.pending-table th,
.pending-table td {
padding: 12px 8px;
}
}
/* Responsivo para Pacotes Contratados */
@media (max-width: 768px) {
.modern-contracted-section {
margin: 16px 10px;
border-radius: 8px;
}
.contracted-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.contracted-header {
padding: 16px 20px;
}
.contracted-title h2 {
font-size: var(--font-size-3xl);
}
.contracted-content.card-active {
padding: 20px 16px;
}
.contracted-card {
padding: 16px;
}
.contracted-card-header {
gap: 12px;
}
.contracted-icon {
width: 40px;
height: 40px;
font-size: var(--font-size-4xl);
}
.empty-state {
padding: 40px 16px;
}
.empty-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
}
/* Animações para a seção contraída */
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.contracted-content.card-active .contracted-card {
animation: slideDown 0.3s ease forwards;
}
.contracted-content.card-active .contracted-card:nth-child(1) {
animation-delay: 0.1s;
}
.contracted-content.card-active .contracted-card:nth-child(2) {
animation-delay: 0.2s;
}
.contracted-content.card-active .contracted-card:nth-child(3) {
animation-delay: 0.3s;
}
.contracted-content.card-active .contracted-card:nth-child(4) {
animation-delay: 0.4s;
}
/* ============================================
CLIENT PROFILE STYLES - Integrated from clientes-perfil-style.css
This section contains all client profile page styles
including navigation, client info boxes, and related components.
All hardcoded values have been replaced with design tokens.
============================================ */
/* ===== CLIENT NAVIGATION (ul.navegacao) ===== */
ul.navegacao {
width: 100%;
font-family: var(--font-sans);
text-transform: capitalize;
display: flex;
flex-flow: row nowrap;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
border-left: 1px solid var(--border);
height: 45px;
min-height: 45px;
position: sticky;
top: 0;
background: var(--surface);
z-index: 100;
margin-bottom: 2rem;
gap: 25px;
}
.navegacao li {
list-style: none;
}
.navegacao li a {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
list-style: none;
text-decoration: none;
font-size: var(--font-size-xl);
height: 100%;
position: relative;
transition: all 0.3s ease;
}
#cliente-box-navegacao>li:nth-child(1)>a {
margin-left: 15px;
}
.navegacao li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--brand-500);
transition: width 0.3s ease;
}
.navegacao li a:hover::after,
.navegacao li a.active::after {
width: 100%;
}
.navegacao li a:hover {
list-style: none;
color: var(--brand-500);
transform: translateY(-1px);
}
.navegacao li a.active {
color: var(--brand-500);
border-right: 1px solid var(--border);
border-left: 1px solid var(--border);
padding: 0 10px;
}
.navegacao li:last-child {
border-right: 0;
}
.navegacao-icones {
color: var(--muted);
width: 15px;
height: 15px;
margin-right: 8px;
transition: color 0.3s ease;
}
.navegacao li a:hover .navegacao-icones,
.navegacao li a.active .navegacao-icones {
color: var(--brand-600);
}
/* ===== DROPDOWN COMPONENTS ===== */
.dropbtn {
width: 100%;
padding: 0;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: var(--surface-2);
min-width: 170px;
box-shadow: var(--shadow-lg);
z-index: 100;
font-size: var(--font-size-md);
margin-top: 0;
left: -20px;
}
.dropdown-content a {
color: var(--muted);
padding: 10px;
text-decoration: none;
display: inline;
width: 100%;
float: left;
}
.dropdown-content a:hover {
font-weight: bold;
background-color: var(--surface-3);
}
.dropdown:hover .dropdown-content {
display: block;
border-left: 0;
background-color: var(--surface-2);
}
/* ===== CLIENT INFO BOX (box-vidacliente) ===== */
.box-vidacliente {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
padding: 1rem;
padding-bottom: 2rem;
}
.box-vidacliente div:nth-child(2) div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: start;
margin-bottom: 5px;
}
.box-vidacliente div:nth-child(2) div p {
font-size: var(--font-size-md);
font-weight: 600;
color: #15803D;
background-color: #F0FDF4;
height: 20px;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
margin-left: 10px;
border: 1px solid #BBF7D0;
padding: 8px 2px;
}
.box-vidacliente div:nth-child(2) div p.inactive {
color: #802015;
background-color: #fdf0f0;
border: 1px solid #f7bbbb;
}
.box-vidacliente_container_imagem {
transition: ease 0.3s;
margin-right: 2.5rem;
}
.initials-circle {
height: 100px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 400;
border-radius: 100%;
color: #15803d;
background-color: #dcfce7;
}
.box-vidacliente div:nth-of-type(2) {
transition: ease 0.3s;
margin-right: auto;
}
.box-vidacliente div:nth-of-type(3) {
float: left;
width: 15%;
min-height: 140px;
}
.box-vidacliente h3 {
text-transform: uppercase;
font-family: var(--font-sans);
font-weight: 700;
color: var(--text);
font-size: var(--font-size-3xl);
margin-bottom: 0.5rem;
text-transform: capitalize;
}
.box-vidacliente p {
align-items: center;
display: flex;
justify-content: start;
flex-flow: row nowrap;
font-family: var(--font-sans);
font-weight: 400;
color: var(--muted);
font-size: var(--font-size-xl);
margin-bottom: 0.5rem;
line-height: 20px;
}
.box-vidacliente_imagem {
height: 100px;
width: 100px;
border-radius: 100%;
box-shadow: var(--shadow-xs);
}
.box-vidacliente_corretor {
display: flex;
flex-flow: column wrap;
max-width: 20%;
align-items: end;
justify-content: end;
gap: 10px;
}
.box-vidacliente_corretor img {
height: 45px;
width: 45px;
border-radius: 100%;
padding: 2px;
background: var(--surface);
box-shadow: var(--shadow-xs);
margin-right: 0.5rem;
}
.box-vidacliente_corretor div {
display: flex;
flex-flow: row nowrap;
}
.box-vidacliente_corretor p {
line-height: 1.4;
text-align: center;
margin: 0;
width: 100%;
color: var(--muted);
font-size: var(--font-size-xl);
font-family: var(--font-sans);
}
.box-vidacliente_corretor p strong {
color: var(--muted);
font-size: var(--font-size-md);
text-align: left;
margin-right: 1rem;
font-weight: 600;
}
.clienteCaixaInativo {
opacity: 0.7;
}
.box-vidacliente_icones {
height: 16px;
width: 16px;
margin-right: 8px;
color: var(--muted);
}
.info-group {
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
/* ===== PROPERTY MENU TOP (imovel-menu-topo) ===== */
.imovel-menu-topo {
float: left;
width: 100%;
list-style: none;
margin: 0 0 20px 0;
}
.imovel-menu-topo ul {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.imovel-menu-topo li {
float: left;
padding: 10px 0;
height: auto;
}
.imovel-menu-topo li:nth-child(1) {
padding-right: 20px;
border-right: 1px solid var(--border);
}
.imovel-menu-topo li:nth-child(2) {
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid var(--border);
}
.imovel-menu-topo li:nth-child(3) {
padding-left: 20px;
}
.imovel-menu-topo a {
float: left;
background: var(--brand-500);
color: var(--surface);
border: 0;
min-width: 65px;
padding: 10px;
border-radius: 3px;
margin: 0 3px;
text-align: center;
text-decoration: none;
height: 34px;
}
.imovel-menu-topo a:hover {
transition: ease 0.4s;
background: var(--text);
}
.imovel-menu-topo a.btn-default:hover {
transition: ease 0.4s;
background: var(--surface-3);
color: var(--text);
}
.imovel-menu-topo a.btn-default {
float: left;
background: var(--surface-2);
color: var(--muted);
border: 1px solid var(--border);
border-radius: 3px;
padding: 5px 8px;
margin: 0 3px;
transition: ease 0.3s;
line-height: 1.5;
text-indent: 5px;
height: 34px;
}
.imovel-menu-topo a.btn-default img {
float: left;
}
.imovel-menu-topo p {
float: left;
padding: 0;
margin: 9px 0;
}
.imovel-menu-topo i {
font-size: var(--font-size-3xl);
color: var(--border);
padding: 0;
}
.conteudo {
min-height: 500px;
float: left;
width: 100%;
}
/* ===== UPLOAD ACTIONS BUTTONS ===== */
.btn-acoes-upload span {
padding: 0;
}
.btn-acoes-upload div:nth-child(1) {
background: var(--surface);
float: left;
width: 100%;
margin: 10px 0 0 0;
padding: 10px 5px;
border-radius: 3px;
min-height: auto;
box-shadow: var(--shadow-xs);
font-weight: 500;
}
.btn-acoes-upload div:nth-child(2) {
background: var(--surface-2);
float: left;
width: 100%;
margin: 5px 0 0 0;
padding: 10px 5px;
min-height: auto;
box-shadow: var(--shadow-xs);
font-weight: 500;
border-radius: 3px;
}
.btn-acoes-upload a {
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: 600;
color: var(--muted);
text-decoration: none;
}
.btn-acoes-upload div img {
vertical-align: middle;
}
.btn-acoes-upload div i {
vertical-align: middle;
font-size: 21px;
margin: 0 10px;
color: var(--brand-500);
}
.btn-acoes-upload .dropdown-content a {
color: var(--muted);
padding: 5px 0;
font-size: var(--font-size-sm);
font-weight: normal;
}
.btn-acoes-upload .dropbtn {
width: 100%;
padding: 18px 0;
border: 1px solid transparent;
}
#myDropdown {
padding: 0px;
margin: 0px;
}
.btn-acoes-upload .dropdown-content i {
padding: 0;
font-size: var(--font-size-4xl);
}
.btn-acoes-upload div:hover,
.btn-acoes-upload div:nth-of-type(2):hover,
.btn-acoes-upload div:nth-of-type(1):hover span,
.btn-acoes-upload div:nth-of-type(1):hover i,
.btn-acoes-upload div:nth-of-type(2):hover,
.btn-acoes-upload div:nth-of-type(2):hover a,
.btn-acoes-upload div:nth-of-type(2):hover i {
background: var(--brand-500);
color: var(--surface);
transition: ease 0.3s;
text-decoration: none;
}
.btn-acoes-upload div:nth-of-type(1):hover .dropdown-content i {
background: transparent;
transition: ease 0.3s;
color: var(--brand-500);
text-decoration: none;
}
/* ===== GENERAL UTILITIES ===== */
.hide {
display: none;
}
.caixa-nome-cliente {
padding: 50px;
width: 100%;
background: linear-gradient(to bottom, #56c358, var(--brand-500));
}
.nome-cliente-h1 {
color: var(--surface);
}
/* ===== PROFILE BUTTONS ===== */
.btn-novo-perfil {
border-radius: 4px;
padding: 6px 8px;
font-size: var(--font-size-sm);
text-decoration: none;
font-weight: bold;
transition: ease 0.3s;
border: 0;
cursor: pointer;
background: var(--brand-700);
color: var(--surface);
font-family: var(--font-sans);
width: 135px;
}
.btn-enviar-perfil {
border-radius: 4px;
padding: 6px 8px;
font-size: var(--font-size-sm);
text-decoration: none;
font-weight: bold;
transition: ease 0.3s;
border: 0;
cursor: pointer;
background: var(--brand-700);
color: var(--surface);
font-family: var(--font-sans);
}
#filtrar_cid_est {
display: none;
}
#formulario-novo-perfil {
display: none;
}
/* ===== PROFILE LISTING ===== */
.informacoes-perfil-itens {
line-height: 1.2;
border: 1px solid var(--border);
overflow: hidden;
transition: ease 1s;
margin-bottom: 5px;
color: var(--text-2);
}
div.informacoes-perfil-itens:nth-child(odd) {
background-color: var(--surface-2);
}
.informacoes-perfil-cabecalho {
line-height: 1.2;
border: 1px solid var(--border);
overflow: hidden;
transition: ease 1s;
margin-bottom: 5px;
text-transform: uppercase;
font-weight: bold;
color: var(--text-2);
font-size: var(--font-size-xl);
font-family: var(--font-sans);
}
.acoes-perfil-busca-item {
min-width: 100px;
}
.acoes-perfil-busca-item:hover {
background-color: var(--surface-3);
border-radius: 5px;
cursor: pointer;
padding-right: 5px;
}
.informacoes-perfil-itens:hover {
border: 1px solid var(--surface-3);
box-shadow: var(--shadow-lg);
transition: ease 0.2s;
opacity: 1;
}
.informacoes-perfil-itens p {
font-size: var(--font-size-md);
font-family: var(--font-sans);
margin-bottom: 5px;
width: 100%;
}
.informacoes-perfil-div {
border: 0;
margin: 0;
overflow: hidden;
padding: 9px 0 9px 13px;
line-height: 1.2;
}
.informacoes-perfil {
width: 33.33%;
float: left;
border-right: 1px solid var(--border);
padding-left: 10px;
}
.acoes-ienv-cliente {
padding: 5px 0 0 5px;
font-family: var(--font-sans);
font-size: var(--font-size-md);
}
/* ===== PROMOTIONAL TEXT ===== */
.texto-promo {
padding: 40px 0 0 40px;
text-align: justify;
font-family: var(--font-sans);
line-height: 1.5;
}
.texto-promo h1 {
color: var(--brand-500);
margin-top: 25px;
font-family: ubuntu;
}
.texto-promo p {
padding: 20px 55px 0 0;
line-height: 1.7;
}
.imagem-texto-promo {
width: 100%;
margin-top: 20px;
}
.texto-promo-movel {
text-align: justify;
font-family: var(--font-sans);
line-height: 1.5;
background: var(--surface-2);
}
.texto-promo-movel h1 {
color: var(--brand-500);
font-family: ubuntu;
}
.texto-promo-movel p {
line-height: 1.5;
}
.texto-promo-topo {
text-align: justify;
font-family: var(--font-sans);
line-height: 1.5;
background: var(--surface-2);
padding: 20px;
margin-bottom: 20px;
}
.texto-promo-topo h1 {
color: var(--brand-500);
font-family: ubuntu;
}
.texto-promo-topo p {
line-height: 1.5;
}
/* ===== COMPATIBLE CLIENTS SECTION ===== */
.icompativel-obs-div {
float: left;
width: 100%;
font-size: 20px;
vertical-align: middle;
display: none;
}
.icompativel-obs-ok {
background: var(--brand-500);
color: var(--surface);
padding: 15px;
border-radius: 5px;
transition: opacity ease 1s;
opacity: 0;
display: none;
text-align: center;
}
.icompativel-btn-enviar-obs {
border-radius: 4px;
padding: 9px 8px;
font-size: var(--font-size-sm);
text-decoration: none;
font-weight: bold;
transition: ease 0.3s;
border: 0;
cursor: pointer;
background: var(--surface-2);
color: var(--text-2);
font-family: var(--font-sans);
margin-top: 16px;
width: 9%;
}
.icompativel-btn-enviar-obs:hover {
background: var(--surface-3);
color: var(--text-2);
font-family: var(--font-sans);
margin-top: 16px;
}
.icompativel-campos-obs {
margin-bottom: 5px;
font-size: var(--font-size-sm);
height: 30px;
border-radius: 4px;
border: 1px solid var(--border);
padding: 5px;
}
.icompativel-enviado-div {
border: 0;
margin: 0;
overflow: hidden;
min-height: 106px;
padding: 10px;
padding-top: 30px;
line-height: 1.2;
background-color: var(--surface-2);
}
.icompativel-lido {
font-size: var(--font-size-sm);
font-family: var(--font-sans);
color: var(--muted);
}
.icompativel-enviado-div p {
padding: 5px;
text-align: center;
}
.icompativel-enviado-assunto-vis {
color: var(--brand-500);
font-weight: bold;
font-family: var(--font-sans);
padding: 5px;
cursor: pointer;
}
.icompativel-enviado-assunto-vis:hover {
background-color: var(--surface-3);
border-radius: 5px;
}
.icompativel-enviado-texto {
font-family: var(--font-sans);
padding: 5px;
display: none;
border-radius: 5px;
width: 100%;
overflow: hidden;
}
.icompativel-enviado-texto p {
padding: 10px;
border-radius: 5px;
}
.icompativel-enviado-texto p:nth-child(1) {
background-color: var(--surface-2);
margin: 5px;
}
.icompativel-enviado-texto p:nth-child(2) {
padding-left: 20px;
margin-top: -10px;
}
/* ===== COMPATIBLE CLIENTS LISTING ===== */
.clientes-compativeis {
width: 100%;
float: left;
}
.clientes-compativeis-item {
width: 100%;
text-align: left;
border-collapse: collapse;
float: left;
}
.clientes-compativeis-item:first-child {
padding-top: 10px;
}
.clientes-compativeis-item-acoes-div {
background-color: var(--surface-2);
}
.clientes-compativeis-item-acoes {
text-align: left;
border-collapse: collapse;
float: left;
cursor: pointer;
padding: 10px;
}
.imovel-clientes-compativeis-item-acoes {
text-align: left;
border-collapse: collapse;
float: left;
cursor: pointer;
padding: 10px 0;
margin-right: 3%;
}
.imovel-clientes-icompativel-obs-div {
float: left;
width: 100%;
font-size: 20px;
vertical-align: middle;
display: none;
margin-top: -5px;
}
.clientes-compativeis-item-movendo {
padding: 10px;
width: 100%;
text-align: center;
}
.clientes-compativeis-guia i {
padding: 0 25px 10px 25px;
color: var(--brand-500);
}
.imovel-clientes-compativeis-guia {
float: left;
}
.imovel-clientes-compativeis-guia i {
padding: 0 20px 10px 5px;
color: var(--brand-500);
}
.btn-icom-salvar {
float: left;
}
.btn-icom-salvar:hover {
color: var(--text);
}
.btn-icom-descartar {
float: left;
}
.btn-icom-descartar:hover {
color: var(--text);
}
.enviar {
float: left;
}
.enviar:hover {
color: var(--text);
}
.clientes-compativeis-item-acoes:after {
border-left: solid 1px;
}
.enviar-imovel-compativeis-div {
display: none;
padding: 0 20px 10px 20px;
overflow: hidden;
width: 100%;
}
.clientes-compativeis-item-acoes i {
float: left;
padding-right: 5px;
}
.imovel-clientes-compativeis-item-acoes i {
float: left;
padding-right: 5px;
}
.clientes-compativeis-item:nth-child(1n+2) {
background: var(--surface);
}
.imovel-clientes-compativeis-col {
float: left;
padding: 10px;
background-color: var(--surface-2);
border-right: 5px solid var(--surface);
}
.imovel-clientes-compativeis-col i {
margin: 0 5px;
vertical-align: bottom;
}
.imovel-clientes-compativeis-col i:hover {
color: var(--text);
}
.imovel-clientes-compativeis-aval {
padding: 5px 0 0 0;
border-right: 5px solid var(--surface);
}
.clientes-compativeis-col {
float: left;
padding: 10px;
background-color: var(--surface-2);
border-right: 5px solid var(--surface);
}
.clientes-compativeis-col a:hover {
text-decoration: none;
}
/* ===== TABS FOR COMPATIBLE PROPERTIES ===== */
.tabs {
width: 100%;
display: inline-block;
color: var(--text-2);
font-family: var(--font-sans);
}
.tab-links {
border: 1px solid var(--border);
font-weight: bold;
font-size: var(--font-size-2xl);
}
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links li {
list-style: none;
float: left;
width: auto;
border-right: 1px solid var(--border);
}
#borderLeft {
border-right: 2px solid var(--border);
position: absolute;
top: 50.8%;
bottom: 45.2%;
}
.tab-links img {
vertical-align: text-bottom;
margin-right: 10px;
}
.tab-links a {
display: inline-block;
border-radius: 3px 3px 0 0;
transition: all linear 0.15s;
}
.tab-links a:hover {
background: var(--surface-2);
text-decoration: none;
}
li.activetab a,
li.activetab a:hover {
background: var(--surface-2);
color: var(--text-2);
}
.tab-content {
padding-top: 15px;
background: var(--surface);
}
.tab {
display: none;
}
.tab.active {
display: block;
}
/* ===== RATING SYSTEM ===== */
.ul-avaliacao {
width: 50%;
}
.ul-avaliacao-imoveis-compativeis {
width: 110px;
float: left;
}
.imovel-clientes-compativel-obs {
float: right;
padding: 4px;
background: var(--surface-2);
border-radius: 4px;
font-size: var(--font-size-sm);
text-align: center;
cursor: pointer;
font-weight: bold;
}
.imovel-clientes-compativel-obs:hover {
color: var(--text);
}
.avaliacao {
background-image: url('imgs/site/ico-star-gray.png');
background-size: 20px;
padding: 11px;
background-repeat: no-repeat;
float: left;
list-style-type: none;
cursor: pointer;
}
.selected {
background-image: url('imgs/site/ico-star-gold.png');
background-size: 20px;
cursor: pointer;
}
.avaliacao:hover {
background-image: url('imgs/site/ico-star-gold.png');
background-size: 20px;
padding: 11px;
background-repeat: no-repeat;
float: left;
}
/* ===== SEND PROPERTY SECTION ===== */
.enviar-imovel-div {
display: none;
padding: 0 20px 10px 20px;
overflow: hidden;
width: 100%;
}
.btn-enviar-imovel {
border-radius: 4px;
padding: 6px 8px;
font-size: var(--font-size-sm);
text-decoration: none;
font-weight: bold;
transition: ease 0.3s;
border: 0;
cursor: pointer;
background: var(--brand-700);
color: var(--surface);
font-family: var(--font-sans);
font-size: var(--font-size-md);
margin-top: 10px;
}
.btn-ienv-enviar {
border-radius: 4px;
padding: 6px 8px;
font-size: var(--font-size-sm);
text-decoration: none;
font-weight: bold;
transition: ease 0.3s;
border: 0;
cursor: pointer;
background: var(--brand-700);
color: var(--surface);
font-family: var(--font-sans);
font-size: var(--font-size-md);
margin-top: 10px;
}
.btn-ienv-apagar img {
vertical-align: middle;
height: 16px;
padding-right: 2px;
margin-top: 0;
margin: 5px;
}
.btn-ienv-exibir {
font-size: var(--font-size-md);
}
.btn-ienv-email {
font-size: var(--font-size-md);
}
textarea.campo {
padding: 5px;
min-height: 40px;
}
.aviso-tela-cheia {
width: 100%;
height: auto;
bottom: 0;
top: 0;
left: 0;
position: absolute;
}
.texto-centralizado {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -50px;
}
/* ===== FILE INFORMATION ===== */
.icone {
width: 45px;
float: left;
}
.informacoes {
float: left;
width: 87%;
}
.editar {
width: 5%;
float: left;
}
.editar-img {
max-height: 15px;
float: right;
cursor: pointer;
}
.informacoes span {
float: left;
font-family: var(--font-sans);
}
.informacoes p {
text-align: justify;
}
.itens {
line-height: 1.2;
border: 1px solid var(--border);
overflow: hidden;
transition: ease 1s;
margin-bottom: 20px;
font-family: var(--font-sans);
color: var(--text-2);
display: flex;
align-items: stretch;
justify-content: center;
}
.itens:hover {
border: 1px solid var(--surface-3);
box-shadow: var(--shadow-lg);
transition: ease 0.2s;
opacity: 1;
}
.itens p {
font-size: var(--font-size-sm);
font-family: var(--font-sans);
color: var(--muted);
}
.nome {
padding-top: 3px;
margin-bottom: 2px;
float: left;
width: 100%;
}
.descricao {
float: left;
width: 100%;
}
.descricao p {
font-size: 11.5px;
}
.itens-div {
padding-top: 0;
}
/* ===== FILE HEADER ===== */
.cabecalho {
text-transform: uppercase;
color: var(--text-2);
min-height: 50px;
}
.cabecalho-div {
border-right: 2px solid var(--surface-2);
padding-bottom: 5px;
padding-top: 5px;
}
.desativado {
opacity: 0.6;
}
/* ===== FILE STATISTICS ===== */
.estatisticas-div {
border: 0;
margin: 0;
overflow: hidden;
background-color: var(--surface-2);
padding: 9px 0 9px 13px;
line-height: 1.2;
}
.estatisticas {
background-color: var(--surface-2);
overflow: hidden;
}
.estatisicas-1-4 {
width: 50%;
float: left;
border-right: 1px solid var(--border);
}
.estatisicas-3-4 {
width: 50%;
float: right;
padding-left: 10px;
}
.estatisicas-1-4 p,
.estatisicas-3-4 p {
font-size: var(--font-size-sm);
margin-top: 1px;
margin-bottom: 1px;
}
/* ===== FILE ACTIONS ===== */
.acoes {
padding: 5px 0 0 5px;
}
.acoes img {
vertical-align: middle;
height: 12px;
padding-right: 8px;
margin-top: -2px;
}
.acoes p:first-child {
margin: 3px 0 10px 0;
}
.acoes p {
margin-bottom: 5px;
cursor: pointer;
}
.acoes p:hover {
background-color: var(--surface-2);
border-radius: 5px;
}
/* ===== SEARCH SECTION ===== */
.buscar {
line-height: 1.2;
border: 1px solid var(--border);
margin-bottom: 15px;
overflow: hidden;
padding-top: 10px;
}
.btnActions {
border-radius: 6px;
font-size: var(--font-size-xl);
text-decoration: none !important;
font-weight: 500;
cursor: pointer;
background: var(--brand-600);
color: var(--surface) !important;
font-family: var(--font-sans);
box-shadow: var(--shadow-xs);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
width: 60%;
margin-bottom: 8px;
padding: 8px 12px;
border: none;
}
.button-dropdown {
border-radius: 6px;
font-size: var(--font-size-xl);
text-decoration: none !important;
font-weight: 500;
cursor: pointer;
background: var(--surface-3);
color: var(--text) !important;
font-family: var(--font-sans);
box-shadow: var(--shadow-xs);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
padding: 8px 12px;
border: none;
}
.btnActions:hover {
background: var(--brand-700);
box-shadow: var(--shadow-sm);
}
#btn-editar {
background: var(--surface);
color: var(--text) !important;
margin-right: 10px;
border: 1px solid var(--border);
box-shadow: var(--shadow-xs);
font-size: var(--font-size-md);
}
#btn-editar:hover {
background: var(--surface-2) !important;
}
/* ===== PAGINATION ===== */
.pagination {
display: inline-block;
}
.pagination a {
border-radius: 3px;
background: var(--brand-500);
color: var(--surface) !important;
cursor: pointer;
display: inline-block;
font-size: var(--font-size-xl);
font-weight: bold;
line-height: 1;
overflow: visible;
padding: 12px;
position: relative;
text-decoration: none;
width: auto;
text-align: center;
border: none;
margin: 3px;
font-family: var(--font-sans);
}
.pagination a.active {
border-radius: 3px;
color: var(--surface) !important;
background: var(--brand-700);
cursor: pointer;
display: inline-block;
font-size: var(--font-size-xl);
font-weight: bold;
line-height: 1;
overflow: visible;
padding: 12px;
position: relative;
text-decoration: none;
width: auto;
text-align: center;
border: none;
margin: 3px;
font-family: var(--font-sans);
}
.pagination a:hover:not(.active) {
background-color: var(--brand-900);
}
/* ===== PROGRESS BAR ===== */
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: var(--text-2);
border-radius: 25px;
padding: 10px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter>span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: linear-gradient(to top, rgb(43, 194, 83), rgb(84, 240, 84));
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
/* ===== MESSAGE BOARD TITLES ===== */
.titulo_placa_mural {
background: var(--surface-2);
margin: -10px -20px 10px -20px;
padding: 15px;
font-weight: bold;
color: var(--muted);
}
.titulo-nova-mensagem {
font-weight: normal;
color: var(--muted);
}
.titulo-nova-mensagem img {
vertical-align: middle;
padding: 0 10px;
}
/* ===== MESSAGE BOARD ===== */
.modal-nova-mensagem {
display: none;
visibility: hidden;
opacity: 0;
transition: ease opacity 0.5s;
height: 0;
}
.modal-nova-mensagem .caixa {
padding: 5px;
}
.mensagem-div {
background: var(--surface);
margin: -10px -20px 10px -20px;
padding: 15px;
font-weight: bold;
color: var(--muted);
border-bottom: 1px solid var(--surface-2);
}
.mural-div {
float: left;
width: 100%;
border: 1px solid var(--border);
padding: 10px 20px;
background: var(--surface);
}
#erro {
margin-bottom: 5px;
}
#erroR {
margin-bottom: 5px;
font-size: var(--font-size-sm);
}
/* ===== CLIENT LISTING ===== */
.campo-clientes-listar {
color: var(--text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
border-style: solid;
border-width: 1px;
border-color: var(--border);
height: 30px;
width: 100%;
background-color: transparent;
border-radius: 4px;
padding-left: 5px;
}
.clientes-acoes {
padding: 10px 0 0 0;
}
.clientes-acoes img {
vertical-align: middle;
height: 12px;
padding-right: 8px;
margin-top: -2px;
}
.clientes-listar-div {
border: 0;
margin: 0;
overflow: hidden;
padding: 15px 0 9px 13px;
line-height: 1.2;
background-color: var(--surface-2);
font-size: var(--font-size-sm);
}
.clientes-listar-div-2 {
border: 0;
margin: 0;
overflow: hidden;
padding: 15px 0 9px 13px;
line-height: 1.3;
background-color: var(--surface-2);
font-size: var(--font-size-sm);
min-height: 95px;
}
.clientes-listar-div-2 span {
margin-right: 5px;
min-width: 75px;
float: left;
}
.clientes-listar-div p {
font-family: var(--font-sans);
font-size: var(--font-size-md);
}
.clientes-listar-div a:link,
.clientes-listar-div a:visited {
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--muted);
}
.cliente-sem-foto {
width: 110px !important;
}
.clientes-listar-imagem {
display: inline-block;
position: relative;
width: 100%;
text-align: center;
}
.clientes-listar-imagem img {
height: unset;
width: unset;
max-width: 100%;
max-height: 120px;
margin: 10px;
border-radius: 5px;
}
.clientes-listar-imagem .hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.2s ease;
}
.itens-div a:hover {
color: var(--text-2);
border-radius: 5px;
}
.clientes-listar-imagem:hover .hover {
opacity: 1;
background: rgba(255, 255, 255, 0.6);
text-align: center;
}
.hover-content {
margin-top: 23%;
transition: opacity 1s ease;
text-align: center;
}
.clientes-listar-informacoes {
border: 0;
margin: 0;
overflow: hidden;
padding: 5px 0 0 0;
line-height: 1.4;
}
.clientes-listar-info-im-lin2 {
width: 100%;
float: left;
padding-top: 10px;
}
.acoes-clientes-listar-item {
border-collapse: collapse;
float: left;
cursor: pointer;
padding: 5px;
min-width: 110px;
}
.acoes-clientes-listar-item i {
margin-right: 8px;
}
.acoes-clientes-listar-item:hover {
background: var(--surface-2);
border-radius: 5px;
}
.div-salvos-texto {
float: left;
}
.clientes-listar-titulo {
font-weight: bold;
font-family: var(--font-sans);
font-size: var(--font-size-xl);
line-height: 1.2;
margin-bottom: 3px;
}
.clientes-listar-realce {
font-weight: bold;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--text-2);
}
/* ===== TOOLTIP BALLOON ===== */
.tooltip-balao {
font-family: var(--font-sans);
display: none;
position: absolute;
right: 30px;
top: 0;
width: 105px;
padding: 7px 12px;
text-align: center;
color: var(--surface);
box-shadow: var(--shadow-sm);
border-radius: 5px;
transition: opacity 0.7s;
font-size: var(--font-size-md);
background-color: rgba(0, 0, 0, 0.8);
}
/* ===== PROPERTY INFO BOX ===== */
.imovel-info {
font-size: var(--font-size-md);
line-height: 1;
text-align: left;
padding: 5px 0;
margin-bottom: 10px;
margin-top: 0;
word-spacing: 1px;
}
.imovel-info .imo-features {
margin-right: 5px;
margin-bottom: 5px;
padding: 4px 10px;
background-color: var(--surface);
border-radius: 5px;
font-weight: normal;
display: inline-flex;
align-content: center;
justify-content: center;
align-items: center;
gap: 5px;
}
/* ============================================
RESPONSIVE STYLES - CLIENT PROFILE
Mobile and tablet adaptations
============================================ */
@media only screen and (max-width: 719px) {
.imagem-promo-topo {
display: none;
}
.informacoes-perfil-cabecalho {
display: none;
}
.informacoes-perfil-2x {
width: 50%;
float: left;
padding-left: 10px;
}
.informacoes-perfil-1x {
width: 50%;
float: left;
padding-left: 10px;
}
.acoes-ienv-cliente {
text-align: center;
}
.acoes-perfil {
text-align: center;
}
.icompativel-info-im {
width: 33%;
float: left;
text-align: center;
margin-bottom: 15px;
}
.icompativel-info-im-lin2 {
width: 100%;
float: left;
text-align: center;
padding-top: 15px;
}
.icompativel-campos-obs {
width: auto;
}
.clientes-compativeis-guia i {
display: none;
}
.imovel-clientes-compativeis-guia i {
display: none;
}
.icompativel-editar-pro {
width: 100%;
float: left;
text-align: left;
}
.imovel-clientes-compativeis-col {
border: 0;
margin-top: 30px;
}
.clientes-compativeis-item-mob {
padding: 0 20px;
}
.imovel-clientes-icompativel-obs-div img {
display: none;
}
.imovel-clientes-icompativel-obs-div button {
width: 23%;
}
.tab-links a {
padding: 15px 10px;
font-size: var(--font-size-md);
}
.tab-links li {
width: 100%;
border-bottom: 1px solid var(--border);
text-align: center;
}
li.activetab a,
li.activetab a:hover {
width: 100%;
}
.imovel-clientes-compativel-obs {
width: 40%;
}
.clientes-listar-info-im {
width: 100%;
min-height: 30px;
}
.clientes-listar-div {
width: 100%;
min-height: 0;
text-align: center;
}
.clientes-listar-div-2 {
text-align: center;
}
.acoes-clientes-listar-item {
text-align: center;
width: 33%;
}
.clientes-listar-imagem {
text-align: center;
}
.texto-promo {
display: none;
}
.imagem-texto-promo {
display: none;
}
/* PROPERTY MENU TOP - Mobile */
.imovel-menu-topo li {
float: left;
width: 100%;
height: auto;
padding: 10px 0;
}
.imovel-menu-topo li:nth-child(1),
.imovel-menu-topo li:nth-child(2),
.imovel-menu-topo li:nth-child(3) {
border-right: 0;
padding-left: 0;
}
.imovel-menu-topo a.btn-default {
margin: 5px;
}
/* NAVIGATION - Mobile */
ul.navegacao {
margin: 0;
padding: 0 0 30px 0;
font-family: var(--font-sans);
position: relative;
border-bottom: none;
}
.navegacao li {
list-style: none;
float: left;
width: 100%;
padding: 0 5px;
margin: 1rem 0;
}
.navegacao li a {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
list-style: none;
text-decoration: none;
font-size: var(--font-size-xl);
height: 100%;
position: relative;
transition: none;
}
.navegacao li a:hover {
list-style: none;
width: 100%;
transform: none;
border-bottom: 0;
}
.navegacao li a::after {
transition: none;
}
.navegacao-icones {
transition: none;
}
.navegacao li a.active {
border-bottom: 1px solid var(--brand-500);
color: var(--brand-500);
background: var(--surface-2);
padding: 21px 40px;
margin: 0;
}
.navegacao li a::after {
background-color: unset;
}
/* CLIENT INFO BOX - Mobile */
.box-vidacliente {
flex-flow: column;
padding: 1rem;
gap: 1rem;
align-items: flex-start;
}
.box-vidacliente_container_imagem {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.container-acoes {
width: 60%;
display: flex;
justify-content: center;
margin-top: 1rem;
}
.box-vidacliente div:nth-of-type(2) {
margin-left: 0;
width: 100%;
text-align: center;
}
.box-vidacliente_imagem {
height: 80px;
width: 80px;
margin: 0;
}
.box-vidacliente h3 {
font-size: var(--font-size-3xl);
margin-bottom: 0;
}
.box-vidacliente p {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
width: 100%;
justify-content: center;
text-align: left;
display: block;
}
.box-vidacliente_corretor {
max-width: 100%;
width: 100%;
flex-direction: column-reverse;
align-items: center;
margin: 2rem 0 1rem 0;
gap: 0;
}
.box-vidacliente_corretor p {
text-align: left;
margin: 0;
}
.info-group {
display: flex;
align-items: center;
margin: 0;
width: 100%;
justify-content: center;
}
.info-group[style*="margin-left"] {
margin-left: 0 !important;
}
.box-vidacliente p:has(.info-group) {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
}
.box-vidacliente p span.info-group,
.box-vidacliente p a {
display: flex;
align-items: center;
width: 100%;
justify-content: start;
}
.box-vidacliente_icones {
min-width: 14px;
margin-right: 8px;
}
.btnActions {
width: 50%;
justify-content: center;
margin-top: 0;
}
.box-vidacliente div:nth-child(2) div {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: start;
width: 100%;
height: 2rem;
}
.box-vidacliente div:nth-child(2) div p {
padding: 0;
margin: 0;
margin-left: 0.8rem;
}
.initials-circle {
height: 90px;
width: 90px;
}
}
/* ===== DESKTOP RESPONSIVE (>= 719px) ===== */
@media only screen and (min-width: 719px) {
.texto-promo-movel {
display: none;
}
.clientes-listar-info-im {
width: 90%;
min-height: 70px;
border-right: 1px solid var(--muted);
}
.clientes-listar-div {
width: 15%;
float: left;
min-height: 95px;
}
.acoes-clientes-listar-item {
text-align: left;
}
.imovel-clientes-compativeis-col {
border-right: 5px solid var(--surface);
}
.informacoes-perfil-2x {
width: 45%;
float: left;
padding-left: 10px;
}
.informacoes-perfil-1x {
width: 25%;
float: left;
padding-left: 10px;
}
.icompativel-info-im {
width: 20%;
float: left;
text-align: center;
}
.icompativel-info-im-lin2 {
width: 33%;
float: left;
text-align: center;
padding-top: 15px;
}
.icompativel-campos-obs {
width: 75%;
}
.icompativel-editar-pro {
text-align: center;
float: right;
}
.tab-links a {
padding: 15px;
}
}
/* ===== LARGE DESKTOP (>= 1119px) ===== */
@media screen and (min-width: 1119px) {
.div-origem {
width: 12%;
}
}
/* ============================================
SELECT2 - CUSTOM THEME OVERRIDE
============================================ */
/* Container Principal */
.select2-container {
width: 100% !important;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
width: 100%;
min-height: 40px;
height: auto;
padding: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
font-family: var(--font-sans);
font-size: var(--input-font-sm);
font-weight: 500;
transition: all 0.2s ease;
}
/* Single Select - Rendered Text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--text);
line-height: 38px;
padding-left: 12px;
padding-right: 36px;
font-size: var(--input-font-sm);
font-weight: 500;
}
/* Single Select - Arrow Container */
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px;
width: 32px;
right: 4px;
top: 50%;
transform: translateY(-50%);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--muted) transparent transparent transparent;
border-width: 5px 5px 0 5px;
margin-left: -5px;
margin-top: -3px;
}
/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: var(--muted);
font-weight: 400;
}
/* ============================================
ESTADOS: HOVER, FOCUS, OPEN
============================================ */
/* Hover */
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
border-color: var(--brand-300);
box-shadow: var(--shadow-hover);
}
/* Focus / Open */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: var(--brand-500);
outline: none;
border: 2px solid var(--brand-500);
}
/* Arrow quando aberto */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent var(--brand-500) transparent;
border-width: 0 5px 5px 5px;
}
/* ============================================
DROPDOWN
============================================ */
.select2-dropdown {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
box-shadow: var(--shadow-xl);
margin-top: 4px;
overflow: hidden;
z-index: 9999;
}
/* Dropdown abaixo */
.select2-container--open .select2-dropdown--below {
border-top: 1px solid var(--border);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* Dropdown acima */
.select2-container--open .select2-dropdown--above {
border-bottom: 1px solid var(--border);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
margin-top: 0;
margin-bottom: 4px;
}
/* ============================================
SEARCH BOX
============================================ */
.select2-container--default .select2-search--dropdown {
padding: 8px;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
width: 100%;
height: 36px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--input-font-sm);
font-weight: 500;
outline: none;
transition: all 0.2s ease;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--brand-500);
outline: none;
border: 2px solid var(--brand-500);
}
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
color: var(--muted);
font-weight: 400;
}
/* ============================================
RESULTS / OPTIONS
============================================ */
.select2-results {
max-height: 280px;
overflow-y: auto;
}
.select2-results__options {
padding: 4px;
}
.select2-container--default .select2-results__option {
padding: 10px 12px;
color: var(--text);
font-family: var(--font-sans);
font-size: var(--input-font-sm);
font-weight: 500;
border-radius: 6px;
margin: 2px 0;
transition: all 0.15s ease;
cursor: pointer;
}
/* Option Hover */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--surface-3);
color: var(--text);
}
/* Option Selecionada */
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
background: var(--brand-50);
color: var(--brand-700);
font-weight: 600;
}
/* Option Selecionada + Hover */
.select2-container--default .select2-results__option--selected.select2-results__option--highlighted,
.select2-container--default .select2-results__option[aria-selected="true"].select2-results__option--highlighted {
background: var(--brand-100);
color: var(--brand-800);
}
/* Option Desabilitada */
.select2-container--default .select2-results__option--disabled {
color: var(--inactive);
background: transparent;
cursor: not-allowed;
opacity: 0.6;
}
/* Grupos de Opções */
.select2-container--default .select2-results__group {
padding: 8px 12px 4px 12px;
color: var(--muted);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ============================================
MULTIPLE SELECT
============================================ */
.select2-container--default .select2-selection--multiple {
padding: 4px 8px;
min-height: 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 0;
margin: 0;
list-style: none;
}
/* Tags / Chips */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px 4px 10px;
margin: 0;
background: var(--brand-50);
border: 1px solid var(--brand-200);
border-radius: 6px;
color: var(--brand-700);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1.4;
max-width: 100%;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
background: var(--brand-100);
border-color: var(--brand-300);
}
/* Botão Remover Tag */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
order: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
background: var(--brand-200);
color: var(--brand-700);
font-size: 14px;
font-weight: bold;
line-height: 1;
cursor: pointer;
transition: all 0.15s ease;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
background: var(--brand-500);
color: white;
}
/* Campo de Busca Inline (Multiple) */
.select2-container--default .select2-selection--multiple .select2-search--inline {
margin: 0;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
height: 28px;
margin: 0;
padding: 0 4px;
border: none;
background: transparent;
color: var(--text);
font-family: var(--font-sans);
font-size: var(--input-font-sm);
font-weight: 500;
outline: none;
}
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
color: var(--muted);
font-weight: 400;
}
/* ============================================
ESTADOS ESPECIAIS
============================================ */
/* Disabled */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
background: var(--surface-2);
border-color: var(--border);
cursor: not-allowed;
opacity: 0.7;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
color: var(--inactive);
}
/* Loading */
.select2-container--default .select2-results__option--load-more,
.select2-container--default .select2-results__option[aria-disabled="true"] {
color: var(--muted);
font-style: italic;
}
/* Mensagem "Nenhum resultado" */
.select2-container--default .select2-results__message {
padding: 16px 12px;
color: var(--muted);
font-family: var(--font-sans);
font-size: var(--input-font-sm);
font-weight: 500;
text-align: center;
}
/* ============================================
CLEAR BUTTON
============================================ */
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection--multiple .select2-selection__clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 8px;
padding: 0;
border-radius: 50%;
background: var(--surface-3);
color: var(--muted);
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover,
.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
background: var(--brand-500);
color: white;
}
/* ============================================
SCROLLBAR CUSTOMIZADA
============================================ */
.select2-results::-webkit-scrollbar {
width: 8px;
}
.select2-results::-webkit-scrollbar-track {
background: var(--surface-2);
border-radius: 4px;
}
.select2-results::-webkit-scrollbar-thumb {
background: var(--surface-4);
border-radius: 4px;
transition: background 0.2s ease;
}
.select2-results::-webkit-scrollbar-thumb:hover {
background: var(--muted);
}
/* ============================================
VARIAÇÕES DE TAMANHO
============================================ */
/* Small */
.select2-sm .select2-selection--single,
.select2-sm .select2-selection--multiple {
min-height: var(--input-height-sm);
}
.select2-sm .select2-selection--single .select2-selection__rendered {
line-height: calc(var(--input-height-sm) - 2px);
font-size: var(--font-size-xs);
}
.select2-sm .select2-selection--single .select2-selection__arrow {
height: calc(var(--input-height-sm) - 2px);
}
/* Medium */
.select2-md .select2-selection--single,
.select2-md .select2-selection--multiple {
min-height: var(--input-height-md);
}
.select2-md .select2-selection--single .select2-selection__rendered {
line-height: calc(var(--input-height-md) - 2px);
}
.select2-md .select2-selection--single .select2-selection__arrow {
height: calc(var(--input-height-md) - 2px);
}
/* Large (padrão) */
.select2-lg .select2-selection--single,
.select2-lg .select2-selection--multiple {
min-height: var(--input-height-lg);
}
/* Extra Large */
.select2-xl .select2-selection--single,
.select2-xl .select2-selection--multiple {
min-height: var(--input-height-xl);
}
.select2-xl .select2-selection--single .select2-selection__rendered {
line-height: calc(var(--input-height-xl) - 2px);
font-size: var(--input-font-md);
}
.select2-xl .select2-selection--single .select2-selection__arrow {
height: calc(var(--input-height-xl) - 2px);
}
/* Data-table style*/
.dt--data-table-container {
background: var(--surface);
border-radius: 12px;
border: 1px solid var(--border);
overflow: auto;
}
.dt--data-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
}
.dt--data-table thead {
background: var(--surface-2);
border-bottom: 1px solid var(--border);
}
.dt--data-table thead th {
padding: 14px 16px;
text-align: left;
font-size: 13px;
font-weight: 600;
color: var(--text);
text-transform: capitalize;
letter-spacing: 0.5px;
}
.dt--data-table tbody tr {
border-bottom: 1px solid var(--border);
transition: background-color 0.2s ease;
}
.dt--data-table tbody tr:hover {
background-color: var(--surface-2);
}
.dt--data-table tbody td {
padding: 14px 16px;
color: var(--text-2);
font-size: 13px;
vertical-align: middle;
}
.dt--table-cell {
display: flex;
align-items: center;
gap: 12px;
}
.dt--table-avatar {
width: 40px;
height: 40px;
border-radius: 8px;
background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
color: white;
flex-shrink: 0;
min-width: 40px;
}
.dt--table-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.dt--table-title {
font-weight: 600;
color: var(--text);
font-size: 14px;
}
.dt--table-subtitle {
font-size: 12px;
color: var(--text-2);
}
.dt--table-contact {
display: flex;
align-items: center;
gap: 6px;
color: var(--text-2);
}
.dt--table-contact i {
width: 16px;
height: 16px;
color: var(--brand-500);
flex-shrink: 0;
}
.dt--status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.dt--status-active {
background: var(--brand-50);
color: var(--brand-700);
border: 1px solid rgba(0, 146, 63, 0.18);
}
.dt--status-inactive {
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
}
.dt--status-badge i {
width: 14px;
height: 14px;
}
.dt--actions-menu {
position: relative;
display: inline-block;
}
.dt--actions-btn {
width: 32px;
height: 32px;
border: 1px solid var(--border);
background: var(--surface-2);
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
padding: 0;
color: var(--text-2);
flex-shrink: 0;
}
.dt--actions-btn:hover {
background: var(--surface);
border-color: var(--brand-300);
color: var(--brand-500);
}
.dt--actions-dropdown {
position: fixed;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 146, 63, 0.1);
min-width: 160px;
display: none;
z-index: 99999;
overflow: visible;
padding: 4px 0;
top: 0;
left: 0;
}
.dt--actions-dropdown.dt--show {
display: block;
animation: dt--dropdownFadeIn 0.15s ease forwards;
}
@keyframes dt--dropdownFadeIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dt--actions-dropdown a,
.dt--actions-dropdown button {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
color: var(--text-2);
text-decoration: none;
font-size: 13px;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
transition: all 0.15s;
white-space: nowrap;
box-sizing: border-box;
text-decoration: none;
}
.dt--actions-dropdown a:hover,
.dt--actions-dropdown button:hover {
background: var(--surface-2);
color: var(--text);
text-decoration: none;
}
.dt--actions-dropdown a i,
.dt--actions-dropdown button i {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--text-2);
}
.dt--actions-dropdown a.dt--remove:hover i,
.dt--actions-dropdown button.dt--remove:hover i {
color: #dc2626;
}
.dt--table-empty-state {
text-align: center;
padding: 60px 20px;
}
.dt--table-empty-state i {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
color: var(--text-2);
}
.dt--table-empty-state h3 {
font-size: 16px;
font-weight: 700;
margin: 0 0 8px 0;
color: var(--text);
}
.dt--table-empty-state p {
font-size: 13px;
color: var(--text-2);
margin: 0;
}
.dt--table-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
margin: 20px 0;
}
.dt--pagination-btn {
width: 40px;
height: 40px;
border: 1px solid var(--border);
background: var(--surface);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
color: var(--text-2);
font-weight: 500;
}
.dt--pagination-btn:hover {
border-color: var(--brand-300);
color: var(--brand-500);
background: var(--brand-50);
}
.dt--pagination-btn.dt--active {
background: var(--brand-500);
color: white;
border-color: var(--brand-500);
}
.dt--fade-in {
animation: dt--fadeIn 0.3s ease-in;
}
@keyframes dt--fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}