:root {
--cor-primaria: #1a3d6d;
--cor-secundaria: #f2b705;
--cinza-50: #f9fafb;
--cinza-100: #f5f6f8;
--cinza-200: #eceef1;
--cinza-300: #dfe3e8;
--cinza-600: #6b7280;
--cinza-900: #1f2937;
--radius: 14px;
--radius-sm: 8px;
--sombra: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.08);
--sombra-hover: 0 4px 8px rgba(16, 24, 40, 0.06), 0 12px 28px rgba(16, 24, 40, 0.14);
--transicao: 180ms cubic-bezier(0.22, 1, 0.36, 1);
/* Superfícies (permitem inverter tudo no dark mode sem duplicar regras) */
--bg-pagina: var(--cinza-100);
--bg-cartao: #fff;
--texto-principal: var(--cinza-900);
--texto-secundario: var(--cinza-600);
--borda: var(--cinza-200);
}
/* Modo escuro (item 10, docs/11) — segue a preferência do SO por padrão
(prefers-color-scheme) e pode ser forçado pelo toggle em js/tema.js via
atributo data-tema no , que tem prioridade sobre a media query. */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
--bg-pagina: #14181f;
--bg-cartao: #1c222d;
--texto-principal: #e8eaed;
--texto-secundario: #9aa4b2;
--borda: #2b3341;
--cinza-100: #1c222d;
--cinza-200: #2b3341;
--cinza-300: #384357;
}
}
:root[data-tema="escuro"] {
--bg-pagina: #14181f;
--bg-cartao: #1c222d;
--texto-principal: #e8eaed;
--texto-secundario: #9aa4b2;
--borda: #2b3341;
--cinza-100: #1c222d;
--cinza-200: #2b3341;
--cinza-300: #384357;
}
* { box-sizing: border-box; }
html, body {
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Arial, sans-serif;
background: var(--bg-pagina);
color: var(--texto-principal);
transition: background var(--transicao), color var(--transicao);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Empurra o rodapé para o fim da tela mesmo quando o conteúdo é curto —
corrige o footer "flutuando" no meio da página em vez de fixo embaixo. */
body > .container:first-of-type,
body > .pagina-sobre {
flex: 1 0 auto;
}
.rodape-loja { flex-shrink: 0; }
a { color: inherit; }
h1, h2, h3, h4 { letter-spacing: -0.01em; }
.header {
background: var(--cor-primaria);
background-image: linear-gradient(135deg, var(--cor-primaria), color-mix(in srgb, var(--cor-primaria) 80%, #000));
color: #fff;
padding: 16px 24px;
display: flex;
align-items: center;
gap: 14px;
position: sticky;
top: 0;
z-index: 10;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.header img { height: 38px; width: 38px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
.header h1 { font-size: 19px; margin: 0; font-weight: 700; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 24px 20px 40px;
width: 100%;
}
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.card {
background: var(--bg-cartao);
border-radius: var(--radius);
box-shadow: var(--sombra);
overflow: hidden;
cursor: pointer;
transition: transform var(--transicao), box-shadow var(--transicao);
border: 1px solid rgba(16, 24, 40, 0.04);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.card .card-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, var(--cinza-200), var(--cinza-300));
overflow: hidden;
}
.card .card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease;
}
.card:hover .card-img-wrap img { transform: scale(1.05); }
/* Compat: cards antigos que ainda colocam ![]()
direto (sem o wrapper) */
.card > img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
background: var(--cinza-300);
}
.card-body { padding: 14px 16px 16px; }
.card-body h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.card-body .preco { font-weight: 800; color: var(--cor-primaria); font-size: 17px; letter-spacing: -0.01em; }
.card-body .ano-km { color: var(--texto-secundario); font-size: 13px; margin-top: 4px; }
.badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
margin-top: 8px;
letter-spacing: 0.01em;
}
.badge.disponivel { background: #e6f4ea; color: #1e7e34; }
.badge.reservado { background: #fff4e0; color: #9a6700; }
.badge.vendido { background: #fdecea; color: #b3261e; }
.filtros {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
background: var(--bg-cartao);
padding: 14px;
border-radius: var(--radius);
box-shadow: var(--sombra);
}
.filtros input, .filtros select {
padding: 9px 12px;
border: 1px solid var(--cinza-300);
border-radius: var(--radius-sm);
font-size: 14px;
background: var(--bg-cartao);
color: var(--texto-principal);
transition: border-color var(--transicao), box-shadow var(--transicao);
}
.filtros input:focus, .filtros select:focus {
outline: none;
border-color: var(--cor-primaria);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 15%, transparent);
}
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 100;
animation: fade-in 150ms ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.modal {
background: var(--bg-cartao);
border-radius: 18px;
max-width: 480px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
animation: slide-up 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.modal .modal-img-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: var(--cinza-200);
overflow: hidden;
}
.modal .modal-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btn-seta-galeria {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,0.45);
color: #fff;
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transicao);
z-index: 3;
}
.btn-seta-galeria:hover { background: rgba(0,0,0,0.65); }
.btn-seta-galeria.seta-esquerda { left: 10px; }
.btn-seta-galeria.seta-direita { right: 10px; }
/* Compat: ![]()
direto no modal sem wrapper */
.modal > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.modal-body { padding: 20px 22px 22px; }
.modal-body h2 { margin: 0 0 6px; font-size: 20px; }
.modal-body .preco-grande { font-size: 24px; font-weight: 800; color: var(--cor-primaria); margin-bottom: 8px; letter-spacing: -0.01em; }
.modal-body dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; margin: 14px 0; }
.modal-body dt { color: var(--texto-secundario); }
.modal-body dd { margin: 0; font-weight: 500; }
.btn {
display: inline-block;
padding: 11px 18px;
border-radius: var(--radius-sm);
border: none;
font-weight: 650;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
transition: transform var(--transicao), filter var(--transicao), box-shadow var(--transicao);
}
.btn:active { transform: scale(0.97); }
.btn:hover { filter: brightness(1.06); }
.btn-primario { background: var(--cor-primaria); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--cor-primaria) 35%, transparent); }
.btn-whatsapp { background: #25d366; color: #fff; width: 100%; box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35); }
.btn-instagram {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
color: #fff;
box-shadow: 0 2px 10px rgba(238, 42, 123, 0.35);
}
.btn-instagram:hover { filter: brightness(1.1); }
.mapa-embed-wrap {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--sombra);
margin: 12px 0;
}
.mapa-embed-wrap iframe { display: block; width: 100%; height: 260px; border: 0; }
.btn-secundario { background: var(--cinza-200); color: var(--texto-principal); }
.btn-perigo { background: #fdecea; color: #b3261e; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.fechar-modal {
position: absolute;
top: 12px;
right: 14px;
background: rgba(0,0,0,0.45);
color: #fff;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
font-size: 15px;
z-index: 5;
transition: background var(--transicao);
}
.fechar-modal:hover { background: rgba(0,0,0,0.65); }
.estado-vazio, .estado-erro {
text-align: center;
padding: 70px 20px;
color: var(--texto-secundario);
}
.form-grupo { margin-bottom: 14px; }
.form-grupo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.form-grupo input, .form-grupo select, .form-grupo textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--cinza-300);
border-radius: var(--radius-sm);
font-size: 14px;
font-family: inherit;
background: var(--bg-cartao);
color: var(--texto-principal);
transition: border-color var(--transicao), box-shadow var(--transicao);
}
.form-grupo input:focus, .form-grupo select:focus, .form-grupo textarea:focus {
outline: none;
border-color: var(--cor-primaria);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 15%, transparent);
}
.tabela-admin { width: 100%; border-collapse: collapse; background: var(--bg-cartao); border-radius: var(--radius); overflow: hidden; box-shadow: var(--sombra); }
.tabela-admin th, .tabela-admin td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--cinza-200); font-size: 14px; }
.tabela-admin th { background: var(--cinza-50); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-secundario); font-weight: 700; }
.tabela-admin img { width: 52px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--cinza-300); }
.tabela-admin tbody tr { cursor: pointer; transition: background var(--transicao); }
.tabela-admin tbody tr:hover { background: var(--cinza-50); }
.tabela-admin td select, .tabela-admin td button { cursor: pointer; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.login-box {
max-width: 360px;
margin: 90px auto;
background: var(--bg-cartao);
padding: 32px;
border-radius: 18px;
box-shadow: var(--sombra-hover);
}
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: var(--cinza-900);
color: #fff;
padding: 12px 20px;
border-radius: var(--radius-sm);
font-size: 14px;
z-index: 200;
box-shadow: var(--sombra-hover);
animation: slide-up 180ms ease;
}
.toast.erro { background: #b3261e; }
.preview-box {
display: flex;
gap: 14px;
padding: 14px;
background: var(--bg-cartao);
border-radius: var(--radius);
margin-bottom: 16px;
box-shadow: var(--sombra);
}
.preview-box img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); background: var(--cinza-300); flex-shrink: 0; }
.preview-box dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; margin: 6px 0 0; }
.preview-box dt { color: var(--texto-secundario); }
.grupo-campos-extras {
border-top: 1px solid var(--cinza-200);
margin-top: 18px;
padding-top: 14px;
}
.campo-extra-linha { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.campo-extra-linha input { flex: 1; }
.campo-extra-linha select { flex-shrink: 0; }
.campo-extra-linha .btn-remover-campo, .campo-extra-linha .btn-remover-vendedor { flex-shrink: 0; padding: 6px 10px; }
.chip-marca {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--cinza-100);
border: 1px solid var(--cinza-300);
border-radius: 999px;
padding: 4px 6px 4px 12px;
font-size: 13px;
margin: 0 6px 6px 0;
}
.chip-marca button {
background: none;
border: none;
cursor: pointer;
color: var(--texto-secundario);
font-size: 12px;
padding: 2px 4px;
}
.galeria-fotos {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.galeria-item { position: relative; width: 72px; height: 72px; }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.galeria-item .btn-remover-foto {
position: absolute;
top: -6px;
right: -6px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #b3261e;
color: #fff;
border: 2px solid #fff;
cursor: pointer;
font-size: 11px;
line-height: 1;
padding: 0;
}
.miniaturas {
display: flex;
gap: 8px;
padding: 12px 18px 0;
overflow-x: auto;
}
.miniatura {
width: 60px;
height: 45px;
object-fit: cover;
border-radius: var(--radius-sm);
cursor: pointer;
opacity: 0.55;
border: 2px solid transparent;
flex-shrink: 0;
transition: opacity var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.miniatura:hover { opacity: 0.85; transform: translateY(-1px); }
.miniatura.ativa { opacity: 1; border-color: var(--cor-primaria); }
.rodape-loja {
background: var(--cinza-900);
color: #cbd2db;
margin-top: 48px;
padding: 28px 0;
font-size: 13px;
}
.rodape-loja strong { color: #fff; font-size: 15px; }
.rodape-loja p { margin: 6px 0 0; }
.rodape-loja a { color: var(--cor-secundaria); text-decoration: none; }
.rodape-loja a:hover { text-decoration: underline; }
.rodape-sistema {
flex-shrink: 0;
background: #12161f;
color: #6b7280;
text-align: center;
padding: 12px 20px;
font-size: 12px;
}
.rodape-sistema a { color: #9ca7b8; text-decoration: none; font-weight: 600; }
.rodape-sistema a:hover { color: #fff; }
.pagina-sobre { max-width: 720px; margin: 0 auto; padding: 36px 20px 48px; width: 100%; }
.pagina-sobre h2 { margin-top: 0; }
.card-vendedor {
display: flex;
align-items: center;
gap: 14px;
background: var(--bg-cartao);
border-radius: var(--radius);
box-shadow: var(--sombra);
padding: 16px;
margin-bottom: 12px;
transition: box-shadow var(--transicao), transform var(--transicao);
}
.card-vendedor:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); }
.card-vendedor .avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--cinza-300), var(--cinza-200));
object-fit: cover;
flex-shrink: 0;
}
.card-vendedor .info { flex: 1; }
.card-vendedor .info strong { display: block; }
/* Gatilho de urgência */
.badge-urgencia {
position: absolute;
top: 12px;
left: 12px;
background: linear-gradient(135deg, #dc2626, #b3261e);
color: #fff;
font-size: 10.5px;
font-weight: 800;
padding: 5px 11px;
border-radius: 999px;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.04em;
box-shadow: 0 2px 8px rgba(179, 38, 30, 0.4);
}
/* Comparador de veículos */
.checkbox-comparar {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
background: rgba(255,255,255,0.95);
border-radius: var(--radius-sm);
padding: 5px 9px;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.checkbox-comparar input { width: auto; margin: 0; accent-color: var(--cor-primaria); }
.barra-comparador {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--cinza-900);
color: #fff;
padding: 14px 22px;
display: flex;
align-items: center;
gap: 14px;
z-index: 90;
flex-wrap: wrap;
box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.barra-comparador .itens-selecionados { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.barra-comparador .chip-comparar { background: rgba(255,255,255,0.15); padding: 5px 12px; border-radius: 999px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.barra-comparador .chip-comparar button { background: none; border: none; color: #fff; cursor: pointer; }
.tabela-comparador { width: 100%; border-collapse: collapse; }
.tabela-comparador th, .tabela-comparador td { padding: 11px; border-bottom: 1px solid var(--cinza-200); text-align: left; font-size: 14px; }
.tabela-comparador th { background: var(--cinza-50); font-weight: 700; }
.tabela-comparador td.rotulo { font-weight: 600; color: var(--texto-secundario); white-space: nowrap; }
/* Calculadora de financiamento */
.calc-financiamento { border-top: 1px solid var(--cinza-200); margin-top: 18px; padding-top: 18px; }
.calc-financiamento .resultado { background: var(--cinza-50); border-radius: var(--radius-sm); padding: 14px; margin-top: 10px; font-size: 14px; }
.calc-financiamento .resultado strong { font-size: 19px; color: var(--cor-primaria); }
/* Botões de ação extra no modal */
.acoes-extra { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acoes-extra .btn { flex: 1; min-width: 120px; }
/* QR Code / impressão */
.pagina-qrcode { max-width: 420px; margin: 40px auto; text-align: center; padding: 20px; }
.pagina-qrcode canvas, .pagina-qrcode img { margin: 20px auto; border-radius: var(--radius-sm); }
@media print {
.header, .btn { display: none !important; }
}
/* Banner Stories */
.banner-preview-wrap { text-align: center; }
.banner-preview-wrap canvas { max-width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--sombra); }
/* Fila de espera / formulário de lead */
.aviso-vendido-box {
background: linear-gradient(135deg, #fff8e6, #fff4e0);
border: 1px solid #f2b705;
border-radius: var(--radius-sm);
padding: 14px;
margin-top: 12px;
font-size: 13px;
}
/* Dashboard: cards de métrica */
.metrica-card {
background: var(--bg-cartao);
border-radius: var(--radius);
box-shadow: var(--sombra);
padding: 18px;
}
.metrica-card .valor { font-size: 26px; font-weight: 800; color: var(--cor-primaria); letter-spacing: -0.02em; }
.metrica-card .rotulo { font-size: 13px; color: var(--texto-secundario); margin-top: 4px; }
/* Funil de Vendas (Kanban) */
.kanban-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
align-items: start;
}
.kanban-coluna {
background: var(--cinza-100);
border-radius: var(--radius);
padding: 12px;
min-height: 120px;
}
.kanban-coluna h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-secundario); }
.kanban-card {
background: var(--bg-cartao);
border-radius: var(--radius-sm);
box-shadow: var(--sombra);
padding: 10px 12px;
margin-bottom: 8px;
cursor: grab;
font-size: 13px;
transition: box-shadow var(--transicao), transform var(--transicao);
}
.kanban-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); }
.kanban-card.arrastando { opacity: 0.4; }
.kanban-card strong { display: block; margin-bottom: 2px; }
.kanban-coluna.sobre-arraste { background: color-mix(in srgb, var(--cor-primaria) 8%, var(--cinza-100)); }
/* Simulador de troca */
.resultado-troca {
background: var(--cinza-50);
border-radius: var(--radius-sm);
padding: 14px;
margin-top: 12px;
font-size: 14px;
}
.resultado-troca strong { font-size: 18px; color: var(--cor-primaria); }