@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;700;900&display=swap');

/* ==========================================================================
   TOKENS -- Salute Imóveis Design System v1.0
   ========================================================================== */
:root {
    /* Azul · escala */
    --navy-950: #0f1f2f;
    --navy-900: #0a2749;
    --navy-800: #1e3957;
    --navy-700: #2c4a6e;
    --navy-600: #3f5f85;
    --navy-500: #5a7ba0;
    --navy-400: #8aa3c1;
    --navy-300: #b7c7dc;
    --navy-200: #dde5ee;
    --navy-100: #eef2f7;

    /* Dourado · escala */
    --gold-800: #7a5f2b;
    --gold-700: #8a6b2e;
    --gold-600: #ae8a3c;
    --gold-500: #be9b47;
    --gold-400: #d0af64;
    --gold-300: #e2cc98;
    --gold-200: #eee0c1;
    --gold-100: #f7f0e0;

    /* Superfícies */
    --surface-page: #ffffff;
    --surface-page-warm: #faf8f4;
    --surface-sunken: var(--navy-100);
    --surface-dark: var(--navy-900);

    /* Aliases semânticos */
    --text-primary: var(--navy-900);
    --text-secondary: var(--navy-700);
    --text-muted: var(--navy-500);
    --text-on-dark: #ffffff;
    --accent-gold: var(--gold-600);
    --accent-gold-strong: var(--gold-700);
    --border-subtle: var(--navy-200);
    --border-strong: var(--navy-400);
    --link-color: var(--gold-700);
    --link-hover: var(--navy-900);
    --focus-ring: var(--gold-500);

    /* Tipografia */
    --text-display: 52px;
    --text-h1: 40px;
    --text-h2: 28px;
    --text-h3: 20px;
    --text-body: 16px;
    --text-small: 14px;
    --text-caption: 12px;
    --text-eyebrow: 13px;
    --weight-extralight: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --weight-black: 900;
    --lh-tight: 1.08;
    --lh-normal: 1.5;
    --ls-wide: .08em;
    --ls-wider: .16em;

    /* Espaçamento (base 4px) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
    --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    /* Raios */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-full: 999px;

    /* Sombras -- difusas, tingidas de azul */
    --shadow-sm: 0 1px 2px rgba(10, 39, 73, 0.08);
    --shadow-md: 0 6px 16px rgba(10, 39, 73, 0.14);
    --shadow-lg: 0 16px 32px rgba(10, 39, 73, 0.18);

    /* Movimento */
    --ease-standard: cubic-bezier(.4, 0, .2, 1);
    --duration-fast: 150ms;
    --duration-default: 240ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Work Sans', Arial, sans-serif;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-weight: var(--weight-regular);
}

/* ==========================================================================
   LOGIN
   ========================================================================== */
.login-body { display: flex; align-items: center; justify-content: center; height: 100vh; background: var(--surface-dark); }
.login-box {
    background: var(--surface-page);
    padding: var(--sp-7);
    border-radius: var(--radius-lg);
    width: 340px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
}
.login-box h1 {
    color: var(--text-primary);
    font-size: 26px;
    font-weight: var(--weight-extralight);
    letter-spacing: var(--ls-wide);
}
.login-subtitle {
    color: var(--text-muted);
    margin-bottom: var(--sp-5);
    font-size: var(--text-small);
    border-top: 2px solid var(--accent-gold);
    padding-top: var(--sp-3);
    margin-top: var(--sp-3);
    display: inline-block;
}
.login-box form { display: flex; flex-direction: column; text-align: left; }
.login-box label {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-1);
}
.login-box input {
    padding: 10px var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-size: var(--text-body);
    font-family: inherit;
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.login-box input:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(190, 155, 71, 0.25); }
.senha-wrap { position: relative; display: flex; }
.senha-wrap input { flex: 1; padding-right: 40px; }
#btn-toggle-senha {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
#btn-toggle-senha:hover { color: var(--text-primary); }
.login-box button {
    margin-top: var(--sp-5);
    padding: 12px;
    background: var(--accent-gold);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--weight-bold);
    font-size: var(--text-body);
    transition: background var(--duration-default) var(--ease-standard);
}
.login-box button:hover { background: var(--accent-gold-strong); }
.login-erro {
    background: #fbe9e7;
    color: #9a3412;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    margin-bottom: var(--sp-3);
    border: 1px solid #f3c9c0;
}

/* ==========================================================================
   LAYOUT GERAL
   ========================================================================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 190px;
    background: var(--surface-dark);
    color: var(--text-on-dark);
    padding: var(--sp-5) 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    z-index: 2;
}
.brand {
    text-align: center;
    font-size: var(--text-h3);
    font-weight: var(--weight-light);
    letter-spacing: var(--ls-wide);
    color: var(--text-on-dark);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--navy-700);
    margin-left: var(--sp-4);
    margin-right: var(--sp-4);
}
.brand span { display: block; font-size: 10px; color: var(--gold-500); font-weight: var(--weight-medium); letter-spacing: var(--ls-wider); margin-top: 2px; }

.nav-item {
    color: var(--navy-300);
    text-decoration: none;
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    border-left: 3px solid transparent;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.nav-item.active { background: var(--navy-800); color: var(--text-on-dark); border-left-color: var(--accent-gold); font-weight: var(--weight-bold); }
.nav-item.disabled { color: var(--navy-700); cursor: not-allowed; }
.nav-item.logout { margin-top: auto; color: var(--gold-400); }
.nav-item:not(.disabled):not(.active):hover { background: var(--navy-800); color: var(--text-on-dark); }

.content { flex: 1; padding: var(--sp-6); min-width: 0; }

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
    gap: var(--sp-4);
    background: var(--surface-page);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
}
.top-bar-titulo { display: flex; flex-direction: column; gap: var(--sp-2); }
.top-bar h1 {
    color: var(--text-primary);
    font-size: var(--text-h1);
    font-weight: var(--weight-light);
    letter-spacing: var(--ls-wide);
}
.tabs-granularidade {
    display: flex;
    gap: 2px;
    background: var(--navy-100);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 4px;
    width: fit-content;
}
.tab-item {
    border: none;
    background: transparent;
    padding: 7px 18px;
    font-family: inherit;
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--duration-default) var(--ease-standard),
                color var(--duration-default) var(--ease-standard),
                box-shadow var(--duration-default) var(--ease-standard);
}
.tab-item.active {
    background: var(--surface-page);
    color: var(--accent-gold-strong);
    font-weight: var(--weight-bold);
    box-shadow: var(--shadow-sm);
}
.tab-item:not(.active):hover { color: var(--text-secondary); background: rgba(255,255,255,0.5); }
.filtros { display: flex; gap: var(--sp-4); align-items: end; }
.filtros label {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
}
.filtros input, .filtros select {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-page);
    font-family: inherit;
    font-size: var(--text-small);
    color: var(--text-primary);
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.filtros input:focus, .filtros select:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(190, 155, 71, 0.25); }
.filtros button {
    padding: 10px var(--sp-5);
    background: var(--accent-gold);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--weight-bold);
    font-size: var(--text-small);
    box-shadow: var(--shadow-sm);
    transition: background var(--duration-default) var(--ease-standard);
}
.filtros button:hover { background: var(--accent-gold-strong); }
.btn-secundario {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: none !important;
}
.btn-secundario:hover { background: var(--navy-100) !important; color: var(--text-primary) !important; }

/* ==========================================================================
   KPIs E CARTÕES
   ========================================================================== */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }

.kpi-card, .top-ads-card, .grafico-card, .insights-card {
    background: var(--surface-page);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
}

.kpi-titulo {
    font-size: var(--text-eyebrow);
    color: var(--accent-gold-strong);
    letter-spacing: var(--ls-wider);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
}
.kpi-valor { font-size: 32px; font-weight: var(--weight-light); color: var(--text-primary); letter-spacing: -0.5px; }
.kpi-detalhe { font-size: var(--text-caption); color: var(--text-muted); margin-top: var(--sp-2); line-height: var(--lh-normal); }
.kpi-detalhe-rotulo {
    font-size: 10px;
    font-weight: var(--weight-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-bottom: var(--sp-1);
}
.kpi-variacao { font-size: var(--text-small); font-weight: var(--weight-bold); margin-top: var(--sp-2); }
.kpi-variacao.positiva { color: #1e7d4f; }
.kpi-variacao.negativa { color: #b3421f; }

.card-titulo {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    color: var(--text-secondary);
    margin-bottom: var(--sp-3);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
}

#tabela-top-ads { width: 100%; font-size: var(--text-small); border-collapse: collapse; }
#tabela-top-ads th {
    text-align: left;
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-subtle);
}
#tabela-top-ads td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--navy-100); color: var(--text-primary); }
#tabela-top-ads a { color: var(--link-color); text-decoration: none; }
#tabela-top-ads a:hover { color: var(--link-hover); }

/* ==========================================================================
   GRÁFICOS
   ========================================================================== */
.graficos { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.grafico-card { position: relative; }

/* Contêiner com ALTURA FIXA (não max-height) -- exigido pelo Chart.js para
   funcionar corretamente com maintainAspectRatio:false. Sem isso, o gráfico
   pode crescer indefinidamente (bug real que já enfrentamos). */
.chart-container-md { position: relative; height: 280px; width: 100%; }
.chart-container-sm { position: relative; height: 220px; width: 100%; }

.insights-card ul { list-style: none; }
.insights-card li { font-size: var(--text-small); color: var(--text-secondary); padding: var(--sp-3) 0; border-bottom: 1px solid var(--navy-100); line-height: var(--lh-normal); }
.insights-card li:last-child { border-bottom: none; }
.insights-card b { color: var(--accent-gold-strong); }

@media (max-width: 900px) {
    .kpis { grid-template-columns: 1fr 1fr; }
    .graficos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FINANCEIRO
   ========================================================================== */
.toggle-plataforma { display: flex; gap: 2px; background: var(--navy-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 4px; }
.toggle-item {
    border: none;
    background: transparent;
    padding: 7px 18px;
    font-family: inherit;
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--duration-default) var(--ease-standard), color var(--duration-default) var(--ease-standard);
}
.toggle-item.active { background: var(--accent-gold); color: #fff; font-weight: var(--weight-bold); box-shadow: var(--shadow-sm); }
.toggle-item:not(.active):hover { color: var(--text-secondary); }

.kpis-financeiro { grid-template-columns: repeat(5, 1fr); }
.kpi-leads-split { font-size: var(--text-caption); color: var(--text-muted); margin-top: var(--sp-2); line-height: var(--lh-normal); }
.kpi-leads-split b { color: var(--text-secondary); }

.graficos-financeiro { grid-template-columns: 1.4fr 1fr; }
.grafico-full { grid-column: 1 / -1; min-width: 0; }

.resumo-lista { list-style: none; }
.resumo-lista li { font-size: var(--text-small); color: var(--text-secondary); padding: var(--sp-3) 0; border-bottom: 1px solid var(--navy-100); line-height: var(--lh-normal); }
.resumo-lista li:last-child { border-bottom: none; }
.resumo-lista b { color: var(--accent-gold-strong); }

.painel-escuro { background: var(--surface-dark); border-color: var(--navy-800); }
.card-titulo-claro { color: var(--navy-300); border-bottom-color: var(--navy-700); }
.donut-legenda { text-align: center; margin-top: var(--sp-2); font-size: var(--text-small); color: var(--navy-300); }

#tabela-portais { width: 100%; font-size: var(--text-small); border-collapse: collapse; }
#tabela-portais th { text-align: left; color: var(--text-muted); font-weight: var(--weight-medium); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--ls-wide); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-subtle); }
#tabela-portais td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--navy-100); color: var(--text-primary); }

@media (max-width: 1100px) {
    .kpis-financeiro { grid-template-columns: repeat(2, 1fr); }
    .graficos-financeiro { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LEADS -- heatmap Corretor x Data
   ========================================================================== */
.filtros-leads-card {
    display: flex;
    gap: var(--sp-4);
    align-items: end;
    background: var(--surface-page);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-5);
}
.filtros-leads-card label {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
}
.filtros-leads-card select {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-page);
    font-family: inherit;
    font-size: var(--text-small);
    color: var(--text-primary);
}
.filtros-leads-card select:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(190, 155, 71, 0.25); }

.select-multiplo { min-width: 140px; }
.select-multiplo option:checked { background: var(--accent-gold); color: #fff; }

/* --- Multiselect customizado (checkboxes em dropdown) --- */
.multiselect { position: relative; display: inline-block; min-width: 180px; }
.multiselect-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-page);
    font-family: inherit;
    font-size: var(--text-small);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}
.multiselect-toggle:hover { border-color: var(--accent-gold); }
.multiselect-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiselect-seta { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.multiselect-painel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface-page);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2) 0;
}
.multiselect-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-small);
    color: var(--text-primary);
    cursor: pointer;
}
.multiselect-item:hover { background: var(--navy-100); }
.multiselect-item input[type="checkbox"] { accent-color: var(--accent-gold); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.multiselect-item-todos { font-weight: var(--weight-bold); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-1); padding-bottom: var(--sp-3); }

/* Sobrescreve especificamente a regra genérica ".filtros label" (usada nos
   rótulos "Categoria:", "Fonte:" etc.), que empurrava o checkbox para cima
   do texto e deixava a fonte grande/maiúscula dentro do dropdown. */
.multiselect .multiselect-item,
.multiselect .multiselect-item-todos {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
    font-weight: var(--weight-regular);
    color: var(--text-primary);
}
.multiselect .multiselect-item-todos { font-weight: var(--weight-bold); }

.filtros-leads-card button {
    padding: 10px var(--sp-5);
    background: var(--accent-gold);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--weight-bold);
    font-size: var(--text-small);
    box-shadow: var(--shadow-sm);
}
.filtros-leads-card button:hover { background: var(--accent-gold-strong); }

.tabela-heatmap-wrap { overflow-x: auto; max-width: 100%; }
#tabela-heatmap { border-collapse: collapse; font-size: var(--text-caption); white-space: nowrap; }
#tabela-heatmap th, #tabela-heatmap td { padding: 6px 10px; text-align: center; border: 1px solid var(--navy-100); }
#tabela-heatmap thead th {
    background: var(--surface-dark);
    color: var(--text-on-dark);
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: var(--weight-medium);
}
#tabela-heatmap .coluna-corretor {
    text-align: left;
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    position: sticky;
    left: 0;
    background: var(--surface-page);
    z-index: 1;
    border-right: 2px solid var(--border-subtle);
}
#tabela-heatmap thead .coluna-corretor,
#tabela-heatmap thead th:first-child { position: sticky; left: 0; top: 0; z-index: 2; background: var(--surface-dark); }
#tabela-heatmap .coluna-total { font-weight: var(--weight-bold); background: var(--navy-100); color: var(--text-primary); }
#tabela-heatmap tfoot td { font-weight: var(--weight-bold); background: var(--navy-100); }

/* ==========================================================================
   MARKETING & FERRAMENTAS
   ========================================================================== */
.graficos-ferramentas-pizzas { grid-template-columns: 1fr 1fr; }

.legenda-categorias { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-3); }
.legenda-categorias .item-legenda { display: flex; align-items: center; gap: 6px; font-size: var(--text-caption); color: var(--text-secondary); }
.legenda-categorias .swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

#tabela-ferramentas-ativas { width: 100%; font-size: var(--text-small); border-collapse: collapse; }
#tabela-ferramentas-ativas th { text-align: left; color: var(--text-muted); font-weight: var(--weight-medium); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--ls-wide); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-subtle); }
#tabela-ferramentas-ativas td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--navy-100); color: var(--text-primary); }
#tabela-ferramentas-ativas td.pendente { color: var(--text-muted); font-style: italic; }

.secao-titulo {
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin: var(--sp-2) 0 var(--sp-4);
}

.kpis-resumo-ceo { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
    .graficos-ferramentas-pizzas { grid-template-columns: 1fr; }
    .kpis-resumo-ceo { grid-template-columns: 1fr; }
}
#tabela-heatmap tfoot .coluna-total { background: var(--navy-200); }