/* JMDC CRM — visual Padrão-Ouro (html[data-visual="ouro"]).
Carvão domina, marrons dão profundidade, cobre só onde há ação. Só na tela: impressão e PDF continuam claros.
O visual azul original continua disponível em Configurações → Logomarca e visual ("clássico"). */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@media screen {
/* ---------- ouro escuro (padrão) ---------- */
:root[data-visual="ouro"] {
--azul: #161412; --azul-2: #2a2019; --azul-3: #3a2c20;
--ambar: #C18A55; --ambar-2: #D9A673;
--fundo: #11100F; --cartao: #1b1612; --linha: rgba(193, 138, 85, .16); --texto: #D9D0C5; --suave: rgba(217, 208, 197, .62);
--campo: #0f0e0d; --borda-campo: rgba(193, 138, 85, .32); --borda-forte: rgba(193, 138, 85, .5); --sutil: #161412; --hover: #2a2019;
--rotulo: #D9D0C5; --tag: #2a2019; --tag-texto: #D9A673; --destaque: #D9A673;
--ok: #7FB77E; --ok-fundo: #1d2a1c; --erro: #E0685A; --erro-fundo: #2e1915; --aviso: #E2B04A; --aviso-fundo: #2b2213; --info: #D9A673; --info-fundo: #241b14;
--sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 1.2rem 2rem -1.4rem rgba(0, 0, 0, .8);
--fonte: "Archivo", "Helvetica Neue", Arial, sans-serif;
--mono: "Plex Mono", ui-monospace, Consolas, monospace;
color-scheme: dark;
}
/* ---------- ouro claro (quando a pessoa escolhe "modo claro") ---------- */
:root[data-visual="ouro"][data-tema="claro"] {
--azul: #161412; --azul-2: #2a2019; --azul-3: #3a2c20;
--fundo: #F5F1EB; --cartao: #ffffff; --linha: #e6dccf; --texto: #211913; --suave: #6f6157;
--campo: #ffffff; --borda-campo: #d8c9b6; --borda-forte: #c4ae94; --sutil: #faf6f0; --hover: #f6eee4;
--rotulo: #3a2c20; --tag: #f1e7da; --tag-texto: #65452F; --destaque: #65452F;
--ok: #3f7d3e; --ok-fundo: #e8f3e7; --erro: #b8483b; --erro-fundo: #fbeae7; --aviso: #8a6214; --aviso-fundo: #fbf1dd; --info: #8a5a2f; --info-fundo: #f6ece1;
--sombra: 0 1px 2px rgba(33, 25, 19, .08), 0 2px 10px rgba(33, 25, 19, .06);
color-scheme: light;
}
:root[data-visual="ouro"] body { -webkit-font-smoothing: antialiased; }
:root[data-visual="ouro"]:not([data-tema="claro"]) body {
background: radial-gradient(60rem 30rem at 90% -10%, rgba(193, 138, 85, .08), transparent 60%), var(--fundo);
}
:root[data-visual="ouro"] ::selection { background: #C18A55; color: #11100F; }
:root[data-visual="ouro"] h1, :root[data-visual="ouro"] h2 { font-stretch: 108%; letter-spacing: -.015em; }
/* lateral e navegação */
:root[data-visual="ouro"] .lateral { background: #0c0b0a; color: #D9D0C5; border-right: 1px solid rgba(193, 138, 85, .16); }
:root[data-visual="ouro"] .nav a { color: rgba(217, 208, 197, .8); transition: background .2s, color .2s, box-shadow .2s; }
:root[data-visual="ouro"] .nav a:hover { background: rgba(193, 138, 85, .1); color: #F5F1EB; }
:root[data-visual="ouro"] .nav a.ativo { background: rgba(193, 138, 85, .16); color: #F5F1EB; box-shadow: inset 3px 0 0 #C18A55; }
:root[data-visual="ouro"] .marca-lateral small, :root[data-visual="ouro"] .marca small { color: rgba(217, 208, 197, .6); font-family: var(--mono); letter-spacing: .08em; }
:root[data-visual="ouro"] .btn-lateral { color: #D9D0C5; border-color: rgba(193, 138, 85, .32); }
:root[data-visual="ouro"] .btn-lateral:hover { background: rgba(193, 138, 85, .12); }
:root[data-visual="ouro"] .topo-movel { background: #0c0b0a; color: #F5F1EB; border-bottom: 1px solid rgba(193, 138, 85, .2); }
/* botões: cobre com brilho que atravessa */
:root[data-visual="ouro"] .btn { transition: transform .25s cubic-bezier(.2, .7, .1, 1), box-shadow .25s, background .2s, border-color .2s, color .2s; }
:root[data-visual="ouro"] .btn.pri, :root[data-visual="ouro"] .btn.dest {
background: #C18A55; border-color: #C18A55; color: #11100F; position: relative; overflow: hidden; isolation: isolate; font-weight: 700;
}
:root[data-visual="ouro"] .btn.pri::after, :root[data-visual="ouro"] .btn.dest::after {
content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%); transition: transform .7s cubic-bezier(.2, .7, .1, 1);
background: linear-gradient(100deg, transparent 20%, rgba(255, 240, 220, .45) 50%, transparent 80%);
}
:root[data-visual="ouro"] .btn.pri:hover::after, :root[data-visual="ouro"] .btn.dest:hover::after { transform: translateX(120%); }
:root[data-visual="ouro"] .btn.pri:hover, :root[data-visual="ouro"] .btn.dest:hover { background: #D9A673; border-color: #D9A673; transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(193, 138, 85, .8); }
/* cartões e indicadores */
:root[data-visual="ouro"]:not([data-tema="claro"]) .cartao, :root[data-visual="ouro"]:not([data-tema="claro"]) .kpi {
background: linear-gradient(160deg, rgba(42, 32, 25, .78), rgba(22, 20, 18, .9));
}
:root[data-visual="ouro"] .kpi { transition: transform .3s cubic-bezier(.2, .7, .1, 1), border-color .3s; }
:root[data-visual="ouro"] .kpi:hover { transform: translateY(-2px); border-color: rgba(193, 138, 85, .4); }
:root[data-visual="ouro"] .kpi .rot { font-family: var(--mono); font-weight: 500; letter-spacing: .1em; font-size: .72rem; }
:root[data-visual="ouro"] .kpi .val { font-stretch: 110%; letter-spacing: -.02em; }
:root[data-visual="ouro"] .conteudo a:not(.btn) { color: var(--info); }
:root[data-visual="ouro"] .faixa-trial .faixa-trial__cta { color: #11100F; opacity: 1; }
:root[data-visual="ouro"] .faixa-trial .faixa-trial__cta:hover { background: #D9A673; }
:root[data-visual="ouro"] .btn.ok { color: #11100F; font-weight: 700; }
/* login */
:root[data-visual="ouro"] .login {
background:
radial-gradient(48rem 32rem at 78% 30%, rgba(193, 138, 85, .17), transparent 62%),
radial-gradient(36rem 26rem at 8% 90%, rgba(101, 69, 47, .3), transparent 60%), #11100F;
}
:root[data-visual="ouro"][data-tema="claro"] .login { background: radial-gradient(48rem 32rem at 78% 30%, rgba(193, 138, 85, .2), transparent 62%), #F5F1EB; }
:root[data-visual="ouro"] .login .cartao { border-color: rgba(193, 138, 85, .32); box-shadow: 0 2.5rem 5rem -2.5rem rgba(0, 0, 0, .9); }
/* tags de papel e foco */
:root[data-visual="ouro"] .tag.super { background: linear-gradient(90deg, #65452F, #C18A55); }
:root[data-visual="ouro"] input:focus, :root[data-visual="ouro"] select:focus, :root[data-visual="ouro"] textarea:focus {
outline: none; border-color: #C18A55 !important; box-shadow: 0 0 0 3px rgba(193, 138, 85, .2);
}
/* escolha do visual em Configurações */
.visuais { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; }
.visual-op { display: flex; flex-direction: column; gap: .5rem; padding: .8rem; border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer; background: var(--cartao); }
.visual-op input { margin: 0; }
.visual-op.ativo { border-color: var(--ambar); box-shadow: 0 0 0 2px var(--ambar); }
.visual-amostra { height: 3.2rem; border-radius: 8px; display: flex; align-items: center; gap: .5rem; padding: 0 .7rem; }
.visual-amostra i { width: 2.2rem; height: .9rem; border-radius: 4px; }
.amostra-ouro { background: #11100F; border: 1px solid #3a2c20; } .amostra-ouro i { background: #C18A55; }
.amostra-classico { background: #0f2a44; } .amostra-classico i { background: #f5b84b; }
}
@media (prefers-reduced-motion: reduce) { :root[data-visual="ouro"] * { transition: none !important; } }