/* =====================================================================
   TEMA DA MARCA — Decor Têxtil
   Só visual. Para outra marca, troque só os valores do :root logo abaixo
   (e a foto marca/fundo-login.jpg): o resto do arquivo deriva deles.
   Vale no painel (index.html), no catálogo (tema "Padrão") e na
   página de vendas / link da bio (revenda.html).
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&display=swap');

:root {
    --marca-preto: #111111;            /* menu lateral, botões principais, barra do catálogo */
    --marca-preto-hover: #2b2b2b;      /* botão preto com o mouse em cima */
    --marca-fundo: #f7f4ef;            /* fundo off-white */
    --marca-areia: #d9cbb8;            /* bordas, cards secundários, chips */
    --marca-areia-clara: #efe8de;      /* areia bem suave (fundos de chips e tabelas) */
    --marca-caramelo: #a67c52;         /* destaques, gráficos, CTAs — #rrggbb, igual à cor de marca/marca.js */
    --marca-caramelo-escuro: #8f6a45;  /* caramelo com o mouse em cima */
    --marca-caramelo-claro: #c39a6c;   /* destaque do título sobre fundo escuro */
    --marca-marrom: #5c4033;           /* textos de apoio */
    --marca-tinta: #2b2118;            /* títulos sobre fundo claro */
    --marca-fonte-titulo: 'EB Garamond', Georgia, 'Times New Roman', serif;

    /* Gráficos — lidos pelo JS (Utils.coresGrafico). Precisam virar hex de 6 dígitos. */
    --grafico-1: var(--marca-caramelo);
    --grafico-2: var(--marca-marrom);
    --grafico-3: var(--marca-areia);
    --grafico-4: var(--marca-preto);
    --grafico-5: #c9a27c;
    --grafico-6: #8a6a4f;
}

/* =====================================================================
   PAINEL (index.html)
   O item ativo, o período e os destaques usam a "Cor do sistema"
   (--primary), que por padrão é a cor da marca (marca/marca.js).
   ===================================================================== */
/* Tema claro: os neutros do sistema viram a escala areia → marrom */
html.pg-painel:not([data-theme="dark"]) {
    --gray-50: var(--marca-fundo);
    --gray-100: var(--marca-areia-clara);
    --gray-200: var(--marca-areia);
    --gray-300: color-mix(in srgb, var(--marca-areia) 85%, var(--marca-marrom));
    --gray-400: color-mix(in srgb, var(--marca-areia) 55%, var(--marca-marrom));
    --gray-500: color-mix(in srgb, var(--marca-areia) 30%, var(--marca-marrom));
    --gray-600: var(--marca-marrom);
    --gray-700: color-mix(in srgb, var(--marca-marrom) 75%, var(--marca-preto));
    --gray-800: color-mix(in srgb, var(--marca-marrom) 45%, var(--marca-preto));
    --gray-900: var(--marca-preto);
    --shadow-sm: 0 1px 2px color-mix(in srgb, var(--marca-marrom) 6%, transparent);
    --shadow-md: 0 4px 14px color-mix(in srgb, var(--marca-marrom) 8%, transparent);
    --shadow-lg: 0 12px 28px color-mix(in srgb, var(--marca-marrom) 12%, transparent);
}

/* Títulos em serifa. font-size-adjust deixa a serifa do tamanho visual
   do desenho original, então os tamanhos de cada tela continuam valendo. */
#pageTitle,
.content-area h1,
.content-area h2,
.cfd-title,
.cfd-card-title,
.cfd-kpi-val {
    font-family: var(--marca-fonte-titulo);
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: lining-nums;
    font-size-adjust: .56;
}
.cfd-kpi-val { font-size-adjust: .5; }
@media (max-width: 767px) {
    #pageTitle { font-size-adjust: .5; }      /* cabeçalho estreito no celular */
    .cfd-kpi-val { font-size-adjust: .45; }   /* cabe R$ 1.234.567,89 no card */
}

/* Menu lateral preto */
.sidebar { background: var(--marca-preto); border-right: 0; }
.sidebar-header { border-bottom-color: rgba(255, 255, 255, .08); }
.sidebar .logo { color: #fff; font-family: var(--marca-fonte-titulo); font-weight: 600; font-size: 24px; }
.sidebar .marca-logo { border-radius: 50%; }
.sidebar-toggle { color: #fff; }
.sidebar-toggle:hover { background: rgba(255, 255, 255, .08); }
.sidebar .menu-label { color: var(--marca-caramelo); letter-spacing: .08em; }
.sidebar .menu-item { color: var(--marca-areia-clara); }
.sidebar .menu-item i { color: var(--marca-areia); }
.sidebar .menu-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar .menu-item:hover i { color: #fff; }
.sidebar .menu-item.active { background: var(--primary); color: var(--primary-contrast); box-shadow: none; }
.sidebar .menu-item.active i { color: var(--primary-contrast); }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }
.sidebar-footer { border-top-color: rgba(255, 255, 255, .08); }
.sidebar .user-name { color: #fff; }
.sidebar .user-role { color: var(--marca-areia); }
.sidebar .user-avatar,
.sidebar .btn-logout { background: rgba(255, 255, 255, .08); color: var(--marca-areia); }
.sidebar .user-avatar i { color: var(--marca-areia); }

/* Cabeçalho claro */
.top-header { background: color-mix(in srgb, var(--marca-fundo) 90%, transparent); border-bottom: 1px solid var(--marca-areia); }

/* Botões principais pretos */
.btn-primary,
.cfd-export { background: var(--marca-preto); border-color: var(--marca-preto); color: #fff; }
.btn-primary:hover,
.cfd-export:hover { background: var(--marca-preto-hover); box-shadow: none; filter: none; }

/* Dashboards: cards brancos com borda areia, destaques na cor do sistema */
.cfd-chip.on { background: var(--primary); color: var(--primary-contrast); box-shadow: none; }
.cfd-kpi,
.cfd-card { border-color: var(--marca-areia); border-radius: 12px; box-shadow: none; }
/* --kc/--ac/--bc vêm em style="" no HTML gerado pelo JS: por isso o !important */
.cfd-kpi,
.vpx-kpi { --kc: var(--primary) !important; }
.cfd-spark path:first-child { fill: var(--kc); }
.cfd-spark path:last-child { stroke: var(--kc); }
.cfd-legend span:nth-child(1) i { background: var(--grafico-1) !important; }
.cfd-legend span:nth-child(2) i { background: var(--grafico-2) !important; }
.cfd-legend span:nth-child(3) i { background: var(--grafico-3) !important; }
.cfd-card-title i { color: var(--primary) !important; }
.cfd-avatar { --ac: var(--primary) !important; }
.cfd-badge { --bc: var(--primary) !important; }
.cfd-tbl th { background: var(--marca-areia-clara); color: var(--marca-marrom); }
.pg-painel .dd-ttl-ic { background: var(--primary); color: var(--primary-contrast); box-shadow: none; }

/* =====================================================================
   LOGIN (tema claro) — cartão off-white sobre foto desfocada de mantas
   ===================================================================== */
.pg-painel:not([data-theme="dark"]) .login-screen { background: var(--marca-tinta) url('fundo-login.jpg') center / cover no-repeat; }
.pg-painel:not([data-theme="dark"]) .login-bg { display: none; }
.pg-painel:not([data-theme="dark"]) .login-container {
    background: var(--marca-fundo);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid color-mix(in srgb, var(--marca-areia) 70%, transparent);
    border-radius: 20px;
    box-shadow: 0 30px 60px color-mix(in srgb, var(--marca-tinta) 35%, transparent);
}
.pg-painel:not([data-theme="dark"]) .login-logo .marca-logo { width: 112px; height: 112px; border-radius: 50%; margin-bottom: 14px; }
.pg-painel:not([data-theme="dark"]) .login-logo h1 {
    font-family: var(--marca-fonte-titulo);
    font-weight: 500;
    font-size: 42px;
    letter-spacing: 0;
    background: none;
    -webkit-text-fill-color: var(--marca-tinta);
    color: var(--marca-tinta);
    animation: none;
}
.pg-painel:not([data-theme="dark"]) .login-subtitle,
.pg-painel:not([data-theme="dark"]) .login-footer { color: var(--marca-marrom); }
.pg-painel:not([data-theme="dark"]) .login-form .form-group label { color: var(--marca-tinta); }
.pg-painel:not([data-theme="dark"]) .login-form input { background: #fff; border-color: var(--marca-areia); color: var(--marca-preto); }
.pg-painel:not([data-theme="dark"]) .login-form input::placeholder { color: var(--gray-400); }
.pg-painel:not([data-theme="dark"]) .login-form input:focus {
    border-color: var(--marca-caramelo);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca-caramelo) 18%, transparent);
}
.pg-painel:not([data-theme="dark"]) .login-form .btn-primary { background: var(--marca-preto); color: #fff; border-radius: 10px; box-shadow: none; }
.pg-painel:not([data-theme="dark"]) .login-form .btn-primary:hover { background: var(--marca-preto-hover); box-shadow: none; }

/* =====================================================================
   CATÁLOGO PÚBLICO — só no tema "Padrão" (os outros temas ficam como são)
   ===================================================================== */
html[data-tema="padrao"] body { background: var(--marca-fundo); }
html[data-tema="padrao"] #announcementBar { background: var(--marca-preto); }
html[data-tema="padrao"] .cf-header {
    background: var(--marca-fundo) !important; /* a cor da loja vem com !important (catalogo-publico.js) */
    border-bottom: 1px solid var(--marca-areia);
    box-shadow: none;
}
html[data-tema="padrao"] #nomeLoja { color: var(--marca-tinta); font-family: var(--marca-fonte-titulo); font-weight: 500; font-size: 26px; }
html[data-tema="padrao"] #logoLoja { border-radius: 50%; border-color: var(--marca-areia); }
html[data-tema="padrao"] #searchCatalogo { background: #fff; border: 1px solid var(--marca-areia); border-radius: 999px; }
html[data-tema="padrao"] .cf-search-btn { background: var(--marca-preto); border-radius: 0 999px 999px 0; }
html[data-tema="padrao"] .cf-search-btn:hover { background: var(--marca-preto-hover); }
html[data-tema="padrao"] .cf-hdr-link,
html[data-tema="padrao"] .cf-menu-toggle { color: var(--marca-tinta); }
html[data-tema="padrao"] .cf-hdr-link:hover,
html[data-tema="padrao"] .cf-menu-toggle { background: color-mix(in srgb, var(--marca-marrom) 8%, transparent); }
html[data-tema="padrao"] .cf-social-btn,
html[data-tema="padrao"] #wppHeaderBtn { background: var(--marca-caramelo) !important; color: #fff; opacity: .85; }
html[data-tema="padrao"] .cf-social-btn:hover { opacity: 1; }
html[data-tema="padrao"] .cf-cart-btn { background: var(--marca-caramelo); border-color: var(--marca-caramelo); border-radius: 999px; color: #fff; }
html[data-tema="padrao"] .cf-cart-btn:hover { background: var(--marca-caramelo-escuro); }
html[data-tema="padrao"] .cf-trust { background: var(--marca-fundo); border-bottom-color: var(--marca-areia); }
html[data-tema="padrao"] .cf-trust-icon { background: transparent; color: var(--marca-caramelo); }
html[data-tema="padrao"] .cf-trust-item:hover .cf-trust-icon { background: var(--marca-areia-clara); color: var(--marca-caramelo); }
html[data-tema="padrao"] .cf-section-hdr h2 { font-family: var(--marca-fonte-titulo); font-weight: 500; font-size: 32px; color: var(--marca-tinta); }
html[data-tema="padrao"] .cf-section-hdr::after { background: linear-gradient(90deg, var(--marca-areia), transparent); }
html[data-tema="padrao"] .cf-cat-card { aspect-ratio: 16 / 10; border-radius: 10px; box-shadow: none; }
html[data-tema="padrao"] .cf-cat-card-ph { background: linear-gradient(135deg, var(--marca-areia), var(--marca-marrom)); }
html[data-tema="padrao"] .cf-cat-card-nome { font-family: var(--marca-fonte-titulo); font-weight: 500; font-size: 30px; }
html[data-tema="padrao"] .cf-footer { background: var(--marca-preto); }
@media (max-width: 640px) {
    html[data-tema="padrao"] .cf-cat-card { aspect-ratio: 1 / 1; }
    html[data-tema="padrao"] .cf-cat-card-nome { font-size: 20px; }
    html[data-tema="padrao"] #nomeLoja { font-size: 21px; }
}

/* =====================================================================
   PÁGINA DE VENDAS / LINK DA BIO (revenda.html)
   Computador: topo escuro com brilhos caramelo/areia, botão caramelo.
   Celular: link da bio claro, botão preto do catálogo e caramelo do WhatsApp.
   A "Cor principal" da loja (--rx) continua valendo; aqui é só o padrão.
   ===================================================================== */
html.pg-revenda {
    --rx: var(--marca-caramelo);
    --rx-d: color-mix(in srgb, var(--marca-caramelo) 75%, #000);
    --rx-dd: color-mix(in srgb, var(--marca-caramelo) 37%, #000);
    --rx-luz: var(--marca-areia-clara);
    --gold: var(--marca-caramelo) !important;        /* revenda.js troca --gold em style="" */
    --gold-d: var(--marca-caramelo-escuro) !important;
    --gold-luz: var(--marca-areia-clara) !important;
    --tinta: var(--marca-tinta);
    --tinta-2: var(--marca-marrom);
    --cinza: color-mix(in srgb, var(--marca-marrom) 80%, #fff);
    --borda: color-mix(in srgb, var(--marca-areia) 50%, #fff);
    --fundo: var(--marca-fundo);
}
.pg-revenda header { background: rgba(255, 255, 255, .92); }
.pg-revenda .hd-logo { font-family: var(--marca-fonte-titulo); font-weight: 500; font-size: 22px; }
.pg-revenda .hd-logo img,
.pg-revenda .hero-avatar { border-radius: 50%; }
.pg-revenda h1,
.pg-revenda h2.tit,
.pg-revenda .cta-final h2 { font-family: var(--marca-fonte-titulo); font-weight: 500; letter-spacing: 0; }
.pg-revenda .hero h1 em { background: none; -webkit-text-fill-color: currentColor; color: var(--marca-caramelo-claro); }
.pg-revenda h2.tit em { color: var(--marca-caramelo); }
.pg-revenda .hero,
.pg-revenda .cta-final {
    background:
        radial-gradient(700px 420px at 85% 10%, color-mix(in srgb, var(--marca-caramelo) 38%, transparent), transparent 60%),
        radial-gradient(600px 400px at 8% 95%, color-mix(in srgb, var(--marca-areia) 16%, transparent), transparent 60%),
        var(--marca-preto);
}
.pg-revenda .orbe-1 { background: var(--marca-caramelo); opacity: .35; }
.pg-revenda .orbe-2 { background: var(--marca-areia); opacity: .18; }
.pg-revenda .orbe-3 { background: var(--marca-marrom); opacity: .35; }
.pg-revenda .hero-bg::after { opacity: .06; }
.pg-revenda .btn-gold {
    background: var(--marca-caramelo); color: #fff; border-radius: 999px;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--marca-caramelo) 30%, transparent);
}
.pg-revenda .btn-gold:hover {
    background: var(--marca-caramelo-escuro);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--marca-caramelo) 40%, transparent);
}
.pg-revenda .btn-vidro { background: transparent; border-color: var(--marca-areia); border-radius: 999px; }
.pg-revenda .btn-vidro:hover { background: color-mix(in srgb, var(--marca-areia) 12%, transparent); }
.pg-revenda .hero-tag,
.pg-revenda .selo,
.pg-revenda .mq-item { background: transparent; border-color: color-mix(in srgb, var(--marca-areia) 45%, transparent); }
.pg-revenda .selo i { color: var(--marca-areia); }
.pg-revenda footer { background: var(--marca-preto); color: color-mix(in srgb, var(--marca-areia) 80%, var(--marca-preto)); }
.pg-revenda footer a { color: var(--marca-areia-clara); }

@media (max-width: 640px) {
    .pg-revenda .hero { background: var(--marca-fundo); color: var(--marca-tinta); }
    .pg-revenda .hero .hero-bg,
    .pg-revenda .hero .hero-slides { display: none; }
    .pg-revenda .hero .sub,
    .pg-revenda .hero .acao-nota { color: var(--marca-marrom); }
    .pg-revenda .hero h1 em { color: var(--marca-caramelo); }
    .pg-revenda .hero .hero-tag,
    .pg-revenda .hero .selo,
    .pg-revenda .hero .mq-item { background: var(--marca-areia-clara); border-color: var(--marca-areia); color: var(--marca-tinta); }
    .pg-revenda .hero .selo i { color: var(--marca-caramelo); }
    .pg-revenda .hero .btn-gold,
    .pg-revenda .barra .btn-gold {
        background: var(--marca-preto); color: #fff;
        box-shadow: 0 8px 20px color-mix(in srgb, var(--marca-preto) 18%, transparent);
    }
    .pg-revenda .hero .btn-vidro,
    .pg-revenda .barra .btn-zap { background: var(--marca-caramelo); border-color: var(--marca-caramelo); color: #fff; }
}