:root{--fundo:#eef6ff;--superficie:#ffffff;--texto:#0c1a2e;--texto-secundario:#45607a;--primaria:#0e7490;--texto-primaria:#ffffff;--acento:#22d3ee;--borda:#bfdbfe;--fonte-titulo:Franklin Gothic Medium, Arial, sans-serif;--fonte-corpo:Calibri, Arial, sans-serif;--peso-titulo:600;--tamanho-base:15px;--espaco:8px;--raio:8px;--sombra:0 4px 16px rgba(0, 0, 0, 0.08);}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--fonte-corpo);background:var(--fundo);color:var(--texto);font-size:var(--tamanho-base);line-height:1.5}
h1,h2,h3{font-family:var(--fonte-titulo);font-weight:var(--peso-titulo);line-height:1.1;margin:0}
p{margin:0}
svg{display:block}
.aviso-demo{padding:6px 12px;text-align:center;font-size:12px;font-weight:700;background:var(--texto);color:var(--fundo)}
.foto{display:flex;align-items:flex-end;padding:14px;border:1px dashed var(--texto-secundario);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(127,127,127,.14) 14px 15px);color:var(--texto-secundario);font-size:12px;line-height:1.4}
.btn{display:inline-block;padding:calc(var(--espaco)*.9) calc(var(--espaco)*1.8);background:var(--primaria);color:var(--texto-primaria);border:1px solid var(--primaria);border-radius:var(--raio);font:inherit;font-weight:700}
.btn-2{background:transparent;color:var(--texto);border-color:var(--borda)}
.tag{display:inline-block;padding:2px 10px;border:1px solid var(--borda);border-radius:999px;font-size:12px;color:var(--texto-secundario)}
.muted{color:var(--texto-secundario)}
.caixa{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);padding:calc(var(--espaco)*2)}
.nav-item{color:var(--texto-secundario);font-size:14px}

.db{display:grid;grid-template-columns:200px 1fr;min-height:100vh}
.db-side{background:var(--superficie);border-right:1px solid var(--borda);padding:calc(var(--espaco)*2);display:flex;flex-direction:column;gap:6px}
.db-marca{font-family:var(--fonte-titulo);font-weight:var(--peso-titulo);margin-bottom:calc(var(--espaco)*2);overflow-wrap:anywhere}
.db-item{padding:6px 10px;border-radius:var(--raio);color:var(--texto-secundario);font-size:14px}
.db-item.ativo{background:var(--primaria);color:var(--texto-primaria)}
.db-main{padding:calc(var(--espaco)*3);min-width:0}
.db-head{display:flex;justify-content:space-between;align-items:center;gap:var(--espaco);margin-bottom:calc(var(--espaco)*2);flex-wrap:wrap}
.db-head h1{font-size:calc(var(--tamanho-base)*1.8)}
.db-metricas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--espaco)}
.db-metricas .caixa{padding:calc(var(--espaco)*1.5)}
.db-val{font-family:var(--fonte-titulo);font-weight:var(--peso-titulo);font-size:calc(var(--tamanho-base)*1.8);margin-top:6px}
.db-meio{display:grid;grid-template-columns:2fr 1fr;gap:var(--espaco);margin-top:var(--espaco)}
.db-meio svg{width:100%;height:auto}
.db-tab{width:100%;border-collapse:collapse;font-size:13px;margin-top:var(--espaco)}
.db-tab th,.db-tab td{padding:8px;border-top:1px solid var(--borda);text-align:left;font-weight:400}
@media (max-width:900px){.db{grid-template-columns:1fr}.db-side{display:none}.db-metricas{grid-template-columns:repeat(2,1fr)}.db-meio{grid-template-columns:1fr}}