/* 1. RESET & FUNDAÇÃO */
:root {
/* Cores Principais */
--primary: #0f172a; /* Azul "Slate" mais moderno */
--accent: #c29d6d; /* Dourado Champanhe (menos amarelado) */
--accent-dark: #a6526e;
--bg-main: #f1f3f5; /* Cinza gelo limpo */
--bg-card: #ffffff;
--text-main: #e0e0e2;
--text-muted: #64748b;
--text-tables: #1e293b; /* Creme para detalhes refinados */
/* A mágica do design moderno */
--radius: 18px; /* Curvas suaves, não quadradão */
--shadow-sm: 0 2px 4px rgba(0,0,0,0.02);
--shadow-md: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);
--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
/* Status */
--success: #16a34a;
--info: #2563eb;
--warning: #b45309;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, sans-serif;
}
body {
background-color: var(--bg-main);
color: var(--text-main);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Utilitário para esconder elementos se necessário */
.hidden { display: none; }
/* 2. LAYOUT PRINCIPAL (GRID) */
.app {
display: grid;
grid-template-columns: 260px 1fr;
min-height: 100vh;
width: 100%;
align-items: stretch; /* Garante que as colunas ocupem a altura toda */
}
/* Sidebar */
.sidebar {
background: #0f172a;
border-right: 1px solid rgba(255,255,255,0.05);
}
/* Área da Direita (Onde fica o Header e o Conteúdo) */
.main-content {
display: flex;
flex-direction: column;
height: 100vh; /* Trava a altura na tela */
background-color: var(--bg-main);
overflow: hidden; /* O container pai não scrolla, quem scrolla é o main */
}
/* Espaçamento do conteúdo interno */
main {
flex: 1; /* Ocupa o espaço que sobrar abaixo do header */
overflow-y: auto; /* Habilita a barra de scroll vertical AQUI */
overflow-x: hidden;
padding: 30px 40px;
background-color: #f8fafc; /* Garante o fundo cinza claro premium */
}
/* ==========================================================================
TIPOGRAFIA UNIVERSAL PREMIUM
========================================================================== */
h1 {
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.1em; /* Espaçamento maior para facilitar a leitura rápida */
color: #64748b; /* Cinza grafite suave */
margin-bottom: 16px;
display: flex;
align-items: center;
font-family: sans-serif;
}
/* H2: Títulos de Páginas ou Grandes Seções (Ex: "Dashboard", "Meus Leads") */
h2 {
font-size: 20px;
font-weight: 700;
color: var(--primary); /* Azul Slate Profundo */
letter-spacing: -0.02em; /* Letras levemente juntas dão ar de design gráfico */
margin-bottom: 8px;
position: relative;
display: flex;
align-items: center;
gap: 12px;
}
/* H3: Títulos de Cards, Widgets e Grupos (Ex: "Leads por Origem", "Novo Lead") */
h3 {
font-size: 13px;
font-weight: 700;
text-transform: uppercase; /* Caixa alta para h3 é o padrão moderno de Dashboard */
letter-spacing: 0.1em; /* Espaçamento maior para facilitar a leitura rápida */
color: var(--text-muted); /* Cinza grafite suave */
margin-bottom: 16px;
display: flex;
align-items: center;
}
/* Detalhe visual opcional: Uma barrinha dourada antes do H3 */
h3::before {
content: "";
display: inline-block;
width: 3px;
height: 12px;
background-color: var(--accent); /* O seu Dourado/Amadeirado */
margin-right: 10px;
border-radius: 2px;
}
/* Subtítulo ou Texto de Apoio (se você usar logo após um
) */
h2 + p {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 24px;
}
/* ==========================================================================
ESTILO DA PÁGINA DE LOGIN
========================================================================== */
/* Seletor específico para quando o body for a tela de login */
/* (Dica: Se puder, adicione no seu HTML de login) */
body:not(.app-body) {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, #0e1524 0%, #000000 100%);
overflow: hidden;
}
.login-box {
background: var(--bg-creme); /* Fundo Creme que você gostou */
padding: 50px 40px;
border-radius: var(--radius);
box-shadow: 0 20px 40px rgba(105, 105, 84, 0.4);
width: 380px;
position: relative;
border-top: 5px solid var(--accent); /* Detalhe Amadeirado */
text-align: center;
animation: slideUp 0.8s ease-out;
}
/* Logo "Medalhão" */
.logo-container {
margin-bottom: 25px;
display: flex;
justify-content: center;
}
.brand-logo {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid var(--accent);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
object-fit: cover;
}
.login-box h2 {
margin: 0 0 30px 0;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--primary);
font-size: 20px;
}
/* Inputs do Login (Estilo Minimalista) */
.login-box input {
width: 100%;
padding: 15px 0;
margin-bottom: 20px;
background: transparent;
border: none;
border-bottom: 1px solid #d3c4b4;
font-size: 14px;
color: var(--text-main);
transition: var(--transition);
}
.login-box input:focus {
outline: none;
border-bottom: 1px solid var(--primary);
}
.login-box input::placeholder {
color: #aaa;
font-size: 12px;
letter-spacing: 1px;
}
/* Botão de Entrada */
.login-box button {
width: 100%;
padding: 15px;
background: var(--accent);
color: var(--bg-creme);
border: 1px solid var(--primary);
border-radius: var(--radius);
cursor: pointer;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
transition: var(--transition);
margin-top: 10px;
}
.login-box button:hover {
background: var(--paccent);
color: var(--paccent);
}
/* Mensagens de Erro */
.error {
background-color: #fce8e8;
color: #a00;
padding: 10px;
border-left: 4px solid #a00;
margin-bottom: 20px;
font-size: 13px;
}
.footer-text {
margin-top: 30px;
font-size: 10px;
color: var(--accent);
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0.8;
}
/* Animação */
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
ESTILO DA SIDEBAR
========================================================================== */
.sidebar {
background-color: var(--primary);
color: var(--white);
padding: 40px 20px;
display: flex;
flex-direction: column;
height: 100vh;
position: sticky;
top: 0;
}
/* Logo / Brand no topo */
.sidebar .brand {
font-size: 18px;
font-weight: 300;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 40px;
text-align: center;
border-bottom: 1px solid rgba(166, 124, 82, 0.2);
padding-bottom: 20px;
}
/* Bloco de Perfil */
.sidebar .profile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 40px;
}
.sidebar img.profile {
width: 85px;
height: 85px;
border-radius: 50%;
border: 2px solid var(--accent);
margin-bottom: 12px;
object-fit: cover;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.profile-name {
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
color: var(--bg-creme);
text-transform: capitalize;
}
/* Links de Navegação */
.nav {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 30px;
}
.nav a {
color: #d3c4b4; /* Tom creme desbotado para itens inativos */
text-decoration: none;
padding: 12px 15px;
font-size: 13px;
letter-spacing: 0.5px;
border-radius: var(--radius);
transition: var(--transition);
display: flex;
align-items: center;
gap: 10px;
}
.nav a:hover {
background: rgba(211, 211, 211, 0.753);
color: var(--white);
padding-left: 22px; /* Efeito de deslize suave */
}
/* Estilo do Link de Formulário (Link Externo) */
.nav p {
font-size: 11px;
text-transform: uppercase;
color: var(--accent);
letter-spacing: 1px;
margin: 20px 0 8px 15px;
font-weight: 600;
}
.sidebar input {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(166, 124, 82, 0.3);
color: var(--accent-light);
font-size: 11px;
padding: 10px;
border-radius: var(--radius);
cursor: pointer;
width: 100%;
margin-bottom: 15px;
outline: none;
}
.sidebar input:focus {
border-color: var(--accent-light);
background: rgba(255, 255, 255, 0.1);
}
/* Botão Sair (Ghost Style) */
.btn-ghost-sidebar {
margin-top: 10px;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #ff6b6b !important; /* Vermelho suave para o "Sair" */
text-align: center;
justify-content: center !important;
}
.btn-ghost-sidebar:hover {
background: rgba(255, 107, 107, 0.1) !important;
border-color: #ff6b6b !important;
}
/* ==========================================================================
ESTILO DO HEADER E CONTAINER PRINCIPAL
========================================================================== */
/* Container que envolve Header + Main */
.main-content {
background-color: var(--bg-main);
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* O Header fica fixo no topo, sem margens negativas */
.dashboard-header {
flex-shrink: 0; /* Impede o header de ser "esmagado" ou subir */
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background: var(--bg-creme);
border-bottom: 2px solid #f0f0f0;
z-index: 100;
}
/* Linha decorativa dourada abaixo do header (detalhe de luxo) */
.dashboard-header::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
}
/* Títulos dentro do Header (caso você use h2 no bloco header) */
.dashboard-header h2 {
font-size: 20px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--primary);
margin: 0;
}
/* Área principal de conteúdo */
main {
padding: 35px 40px;
width: 100%;
max-width: var(--max-width); /* Definido no root como 1400px */
margin: 0 auto;
flex: 1; /* Faz o main ocupar o resto da tela */
}
/* Ajustes para elementos de busca ou filtros que você venha a colocar no header */
.search {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 8px 15px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: var(--shadow-sm);
max-width: 600px; /* Não deixa a busca esticar pro infinito */
}
.search input {
border: none !important; /* Remove a borda quadrada feia */
background: transparent !important;
padding: 8px 0;
width: 100%;
color: var(--text-main);
}
.search select {
border: 1px solid #e2e8f0 !important;
background-color: #ffffff !important;
padding: 6px 10px;
border-radius: 6px;
font-size: 13px;
color: var(--primary) !important;
cursor: pointer;
transition: var(--transition);
}
/* Estilo padrão para inputs no header */
.dashboard-header input,
.dashboard-header select {
padding: 10px 14px;
border-radius: var(--radius);
border: 1.5px solid #e0e4e8;
background: var(--white);
font-size: 13px;
color: var(--text-main);
transition: var(--transition);
}
.dashboard-header input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.1);
}
/* ==========================================================================
CARDS DE MÉTRICAS (TOP)
========================================================================== */
.metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 35px;
}
.metric-card:hover {
transform: translateY(-5px);
border-bottom-color: var(--accent);
}
.metric-card h3 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 10px;
}
.metric-card .big {
font-size: 32px;
font-weight: 700;
color: var(--primary);
}
/* ==========================================================================
LAYOUT DE CONTEÚDO (TABELA + ASIDE)
========================================================================== */
.content {
display: grid;
grid-template-columns: 1fr 350px; /* Tabela larga e detalhe estreito */
gap: 25px;
align-items: start;
}
/* Card que envolve a tabela */
.table.card {
background: var(--white);
border-radius: var(--radius);
padding: 0; /* Tabela encosta nas bordas */
overflow: hidden;
box-shadow: var(--shadow);
}
/* Estilos genéricos para todas as tabelas */
table {
width: 100%;
border-collapse: collapse;
}
table thead {
background: var(--bg-creme);
color: var(--primary);
}
table th {
padding: 12px 15px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
text-align: left;
color: inherit;
}
table td {
padding: 12px 15px;
font-size: 13px;
color: var(--text-tables);
border-bottom: 1px solid #f1f5f9;
}
table tbody tr:hover {
background: #fdfaf5;
}
/* Tabela Estilizada */
#leadsTable {
width: 100%;
border-collapse: collapse;
}
#leadsTable thead {
background: var(--primary);
color: #ffffff;
}
#leadsTable th {
padding: 15px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
text-align: left;
color: inherit;
}
#leadsTable td {
padding: 14px 15px;
border-bottom: 1px solid #f1f5f9;
font-size: 14px;
color: var(--text-tables);
}
#leadsTable tbody tr:hover {
background: #fdfaf5; /* Efeito creme ao passar o mouse */
}
#leadsTable a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border-bottom: 1px solid transparent;
}
#leadsTable a:hover {
border-bottom-color: var(--accent);
}
/* Links em outras tabelas */
table a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
border-bottom: 1px solid transparent;
}
table a:hover {
border-bottom-color: var(--accent);
}
/* Badges de Status Dinâmicas */
.status-badge {
padding: 4px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
}
/* Agora alinhado com backend (snake_case) */
.status-novo {
background: #eccc3c;
color: #2c2c2b;
}
.status-em_negociacao {
background: #46f04ed3;
color: #292929;
}
.status-visita_agendada {
background: #ede9fe;
color: #6d28d9;
}
.status-fechado {
background: #2057ee;
color: #eaeefc;
}
/* Badge de Status Premium */
.status-badge {
padding: 4px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
}
/* Cores por Status (Paleta Profissional) */
.status-novo {
background: #eccc3c;
color: #2c2c2b;
}
.status-em-negociacao {
background: #46f04ed3;
color: #292929;
}
.status-visita-agendada {
background: #ede9fe;
color: #6d28d9;
}
.status-fechado {
background: #2057ee;
color: #eaeefc;
}
/* ==========================================================================
CARD DE DETALHES (ASIDE)
========================================================================== */
.lead-card {
position: sticky;
top: 20px;
background: var(--bg-card); /* Branco puro para os campos brilharem */
padding: 30px;
border: none;
border-radius: 16px; /* Curva mais moderna */
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: 20px;
}
.lead-card h3 {
font-size: 18px;
font-weight: 700;
color: var(--primary);
letter-spacing: -0.5px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
/* Estilização dos Campos (Inputs e Selects) */
.modal-body {
display: flex;
flex-direction: column;
gap: 15px; /* Espaço entre os campos */
}
.modal-body input,
.modal-body select {
width: 100%;
padding: 12px 16px;
background-color: #f8fafc; /* Cinza muito leve */
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 14px;
color: var(--text-tables);
transition: var(--transition);
outline: none;
}
/* Labels em formulários */
label {
color: var(--text-tables);
font-weight: 500;
display: block;
margin-bottom: 6px;
}
/* Efeito de foco Premium */
.modal-body input:focus,
.modal-body select:focus {
background-color: #ffffff;
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(194, 157, 109, 0.15);
color: var(--text-tables);
}
/* Estilização específica do Select (remover seta feia do navegador) */
.modal-body select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
cursor: pointer;
}
/* Grupo de Botões */
.modal-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 10px;
}
.modal-actions .btn {
min-width: 0; /* Permite que o botão caiba no grid */
padding: 12px;
font-size: 12px;
}
.modal-actions .btn:not(.ghost) {
background: var(--primary);
color: white;
box-shadow: 0 4px 6px rgba(15, 23, 42, 0.2);
}
.modal-actions .btn.ghost {
background: #f1f5f9;
color: var(--text-muted);
border: none;
}
.modal-actions .btn.ghost:hover {
background: #e2e8f0;
color: var(--primary);
}
.lead-card .card {
background: var(--bg-creme);
padding: 25px;
border: 1px solid rgba(166, 124, 82, 0.2);
border-radius: var(--radius);
}
.lead-card h4 {
color: var(--primary);
margin-bottom: 10px;
font-size: 16px;
}
.lead-card .meta {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 15px;
}
.lead-card .note {
background: white;
padding: 12px;
border-radius: 4px;
font-size: 13px;
border-left: 3px solid var(--accent);
margin-bottom: 20px;
color: var(--text-tables);
}
/* Botões Gerais (Volta ao tamanho normal) */
.btn {
width: auto; /* IMPORTANTE: para de ocupar a tela toda */
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 24px; /* Mais gordinho pros lados */
min-width: 160px; /* Tamanho mínimo elegante */
height: 42px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
border: none;
}
.btn:not(.ghost) {
background: var(--primary);
color: white;
}
.btn.ghost {
background: transparent;
border: 1px solid var(--primary);
color: var(--primary);
}
.btn:hover {
background: var(--accent);
color: white;
border-color: var(--accent);
}
/* Botão de Cancelamento */
.btn-cancel {
background-color: #fee2e2;
color: #991b1b;
border: 1px solid #fecaca;
border-radius: 6px;
padding: 6px 10px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.btn-cancel:hover {
background-color: #fecaca;
color: #7f1d1d;
border-color: #f87171;
}
/* ==========================================================================
Lembretes (Destaque)
========================================================================== */
.card.destaque {
background: linear-gradient(135deg, #fff3cd 0%, #fffbe6 100%);
border-left: 6px solid var(--accent-light);
color: #856404;
padding: 20px;
margin-bottom: 25px;
}
/* ==========================================================================
VIEW SWITCHER (PILULA DE SELEÇÃO)
========================================================================== */
.view-container {
display: flex;
align-items: center;
gap: 15px;
}
.view-switcher {
display: inline-flex;
background-color: #f3f4f6;
padding: 4px;
border-radius: 8px;
border: 1px solid #e5e7eb;
gap: 4px;
}
.view-link {
padding: 8px 20px;
border-radius: 100px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
display: inline-block;
border: 1px solid #e2e8f0;
background-color: #f8fafc;
color: var(--text-tables);
cursor: pointer;
transition: var(--transition);
}
/* Estado Ativo do Switcher */
.view-link.active {
background: var(--primary); /* Azul escuro no ativo */
color: white !important;
border-color: var(--primary);
box-shadow: 0 4px 6px rgba(15, 23, 42, 0.15);
}
.view-link:hover:not(.active) {
background-color: #e2e8f0;
color: var(--primary);
border-color: #cbd5e1;
}
.view-badge {
font-size: 12px;
color: var(--text-muted);
}
/* ==========================================================================
WIDGET GRID (GRÁFICOS E TABELAS DO DASHBOARD)
========================================================================== */
.widget-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
width: 100%;
margin-top: 25px;
}
/* Faz a tabela de "Últimos Leads" ocupar as duas colunas (largura total) */
.widget-grid .widget-card:last-child {
grid-column: 1 / -1;
}
.metric-card, .widget-card, .card {
background: var(--bg-card);
border: 1px solid rgba(226, 232, 240, 0.8); /* Borda quase invisível */
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
color: var(--text-tables);
}
.card h3 {
color: var(--text-tables);
font-weight: 600;
margin-bottom: 15px;
}
.widget-card h3 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 20px;
border-left: 3px solid var(--accent);
padding-left: 10px;
}
.widget-card {
color: var(--text-tables);
}
/* Ajuste para o Canvas do Chart.js não estourar */
canvas {
width: 100% !important; /* Força o gráfico a obedecer o card */
height: auto !important;
max-height: 250px;
}
/* ==========================================================================
AJUSTES DE TABELA DENTRO DE WIDGETS
========================================================================== */
.widget-card .table {
margin-top: 10px;
overflow-x: auto;
}
/* Reaproveita o estilo de tabela que já criamos para a Home */
#lastLeadsTable {
width: 100%;
border-collapse: collapse;
height: auto;
}
#lastLeadsTable thead {
background: var(--primary);
color: #ffffff;
}
#lastLeadsTable th {
background: var(--primary);
color: #ffffff;
border-bottom: 2px solid #1e293b;
padding: 12px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
text-align: left;
}
#lastLeadsTable td {
padding: 10px 12px;
font-size: 13px;
color: var(--text-tables);
}
#lastLeadsTable .status-badge {
padding: 4px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
}
#lastLeadsTable tbody tr:hover {
background: #fdfaf5;
}
/* Tabela de Ranking */
#rankingTable {
width: 100%;
border-collapse: collapse;
}
#rankingTable thead {
background: var(--bg-creme);
color: var(--primary);
}
#rankingTable th {
padding: 12px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
text-align: left;
border-bottom: 2px solid #e2e8f0;
}
#rankingTable td {
padding: 12px;
font-size: 13px;
color: var(--text-tables);
border-bottom: 1px solid #f1f5f9;
}
#rankingTable tbody tr:hover {
background: #fdfaf5;
}
/* Botão Voltar no Header */
.header-left .btn-ghost-sidebar {
display: inline-block;
padding: 6px 12px;
font-size: 11px;
text-decoration: none;
border: 1px solid var(--accent);
color: var(--accent);
border-radius: 4px;
margin-top: 8px;
transition: var(--transition);
}
.header-left .btn-ghost-sidebar:hover {
background: var(--accent);
color: white;
}
.header-left h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 500px;
}
h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/* ==========================================================================
CORREÇÃO DO HEADER (EVITAR ESTOURAR A TELA)
========================================================================== */
.dashboard-header {
background: linear-gradient(135deg, var(--white) 0%, var(--bg-creme) 100%);
padding: 15px 30px; /* Reduzi um pouco o padding para ganhar respiro */
border-bottom: 2px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; /* ESSENCIAL: Faz os itens pularem linha em telas menores */
gap: 20px; /* Espaço entre os grupos de elementos */
position: relative;
width: 100%; /* Garante que ele não passe da largura da main-content */
box-sizing: border-box;
flex-shrink: 0; /* Não deixa o header sumir se o conteúdo crescer */
z-index: 10;
}
/* Garante que o grupo da esquerda e direita não briguem */
.header-left, .view-container {
flex-shrink: 1; /* Permite encolher */
min-width: 0;
}
/* Ajuste para o seletor de visão não ficar gigante */
.view-switcher {
flex-wrap: nowrap; /* Mantém os botões da pílula juntos */
white-space: nowrap;
}
/* ==========================================================================
MODAL - ESTILOS
========================================================================== */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal.active {
display: flex;
}
.modal-content {
background-color: var(--bg-card);
padding: 30px;
border-radius: var(--radius);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 500px;
animation: slideUp 0.3s ease-out;
}
.modal-content h3 {
color: var(--primary);
margin-bottom: 20px;
font-size: 20px;
font-weight: 600;
}
.modal-content input {
width: 100%;
padding: 12px 16px;
background-color: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
color: var(--text-main);
margin-bottom: 20px;
transition: var(--transition);
outline: none;
}
.modal-content input:focus {
background-color: #ffffff;
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(194, 157, 109, 0.15);
}
.modal-content button {
padding: 10px 20px;
font-size: 14px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
margin-right: 10px;
}
.modal-content button:not(.ghost) {
background-color: var(--primary);
color: white;
box-shadow: 0 4px 6px rgba(15, 23, 42, 0.2);
}
.modal-content button:not(.ghost):hover {
background-color: #1e293b;
box-shadow: 0 6px 12px rgba(15, 23, 42, 0.3);
}
.modal-content button.ghost {
background-color: #f1f5f9;
color: var(--text-muted);
border: 1px solid #e2e8f0;
}
.modal-content button.ghost:hover {
background-color: #e2e8f0;
color: var(--primary);
}
/* ==========================================================================
CONFIGURAÇÕES - PREFERÊNCIAS DE NOTIFICAÇÃO
========================================================================== */
.form-lead button[type="submit"] {
width: auto;
max-width: 250px;
}
/* Em telas menores que 1200px, empilha os gráficos para não apertar */
@media (max-width: 1200px) {
.widget-grid {
grid-template-columns: 1fr;
}
.dashboard-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
/* Container de Curadoria Centralizado */
.curadoria-wrapper {
display: grid;
grid-template-columns: 1fr 380px; /* Coluna da esquerda flexível, direita fixa */
gap: 30px;
max-width: 1200px; /* Impede que os cards fiquem esticados demais em telas ultra-wide */
margin: 0 auto; /* Centraliza o conteúdo na tela */
padding: 20px;
}
/* Estilização do Select Multiple "Anti-Anos-90" */
.select-multiple-premium {
height: 150px !important;
padding: 8px !important;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-family: inherit;
color: var(--text-main);
}
.select-multiple-premium option {
padding: 8px 12px;
border-radius: 6px;
margin-bottom: 2px;
cursor: pointer;
}
.select-multiple-premium option:checked {
background-color: var(--primary) !important;
color: white !important;
}
.search-container-premium {
margin-bottom: 30px;
width: 100%;
}
.search-wrapper {
position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 20px;
font-size: 18px;
color: #94a3b8;
pointer-events: none;
}
#filtroCuradoria {
width: 100%;
height: 55px; /* Deixa a barra mais alta/robusta */
padding: 0 25px 0 55px; /* Espaço para o ícone na esquerda */
font-size: 16px;
color: #1e293b;
background-color: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#filtroCuradoria:focus {
border-color: #2563eb; /* Azul destaque */
box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1);
outline: none;
background-color: #fff;
}
#filtroCuradoria::placeholder {
color: #94a3b8;
font-weight: 400;
}
.search-stats {
margin-top: 10px;
font-size: 13px;
color: #64748b;
font-weight: 500;
margin-left: 5px;
}
/* MAPA *//* MAPA *//* MAPA*//* MAPA *//* MAPA *//* MAPA*//* MAPA *//* MAPA *//* MAPA*//* MAPA *//* MAPA *//* MAPA*/
.leaflet-container {
font-family: 'Inter', sans-serif !important;
}
.leaflet-popup-content-wrapper {
border-radius: 8px !important;
padding: 5px !important;
}
.leaflet-popup-tip-container {
display: none; /* Deixa o popup mais limpo */
}
/* Ícone numerado no mapa */
.custom-div-icon {
background: none;
border: none;
}
.btn-ghost:hover {
background-color: #f8fafc;
border-color: #2563eb !important;
color: #2563eb;
}
/* Garante que o container de links não quebre o layout */
#containerLinks {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}
/* Card de Link (Visual Moderno) *//* Card de Link (Visual Moderno) *//* Card de Link (Visual Moderno) *//* Card de Link (Visual Moderno) *//* Card de Link (Visual Moderno) */
/* Container de Grid para os Cards */
#containerLinks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 25px;
padding: 20px 0;
}
.link-card {
background: #ffffff;
border-radius: 24px; /* Super arredondado */
padding: 24px;
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.link-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
border-color: #3b82f6;
}
/* Badge de Endereço Superior */
.endereco-pill {
background: #f1f5f9;
color: #475569;
padding: 6px 14px;
border-radius: 50px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 15px;
display: inline-block;
width: fit-content;
}
.link-info h4 {
font-size: 19px;
font-weight: 800;
color: #0f172a;
margin: 0 0 12px 0;
display: flex;
align-items: center;
gap: 10px;
}
.link-url {
color: #3b82f6;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: color 0.2s;
}
.link-url:hover { color: #1d4ed8; }
/* Clientes - Estilo Tags Flutuantes */
.link-clients {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 15px 0 20px 0;
}
.client-tag {
background: white;
color: #64748b;
padding: 5px 12px;
border-radius: 50px;
font-size: 12px;
font-weight: 500;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
/* Botões - O "Pulo do Gato" Moderno */
.card-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
}
.btn-modern {
height: 46px;
border-radius: 50px; /* Estilo Pilula */
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-mapa-new {
background: #f8fafc;
color: #1e293b;
border: 1px solid #e2e8f0;
padding: 0 20px;
flex: 1;
}
.btn-mapa-new:hover { background: #f1f5f9; border-color: #cbd5e1; }
.btn-whatsapp-new {
background: #22c55e;
color: white;
padding: 0 25px;
flex: 2;
box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
}
.btn-whatsapp-new:hover {
background: #16a34a;
transform: scale(1.03);
}
.btn-delete-new {
background: #fee2e2;
color: #ef4444;
width: 46px; /* Mesma altura = Círculo perfeito */
border-radius: 50%;
flex-shrink: 0;
}
.btn-delete-new:hover {
background: #fecaca;
transform: rotate(15deg);
}