* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #f1eadd; color: #2e2a24; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
input, select { font-family: inherit; }
::placeholder { color: #bcb3a2; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }

.hov:hover { background: #faf6ef; }

/* dica do gráfico: aparece no hover e no foco do teclado (o mesmo conteúdo que a tabela) */
.tip { position: relative; outline: none; cursor: default; }
.tip:hover, .tip:focus-visible { background: #faf6ef; }
.tip::after { content: attr(data-tip); white-space: pre; position: absolute; left: 12px; bottom: calc(100% - 4px); background: #2e2a24; color: #fff; font: 600 12px/1.5 'Plus Jakarta Sans', system-ui, sans-serif; padding: 8px 11px; border-radius: 9px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 20; box-shadow: 0 10px 24px -8px rgba(46,42,36,.45); }
.tip:hover::after, .tip:focus-visible::after { opacity: 1; }

/* telas estreitas: sidebar vira faixa no topo */
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar { width: auto !important; height: auto !important; position: static !important; flex-direction: row !important; align-items: center; gap: 12px; padding: 12px 16px !important; border-right: none !important; border-bottom: 1px solid #ece5d8; overflow-x: auto; }
  .sidebar .brand { margin-bottom: 0 !important; }
  .sidebar .nav { display: flex; gap: 4px; }
  .sidebar .nav-item { margin-bottom: 0 !important; white-space: nowrap; padding: 9px 12px !important; }
  .sidebar .grow { display: none; }
  .sidebar .usercard { flex: none; }
  .main { padding: 22px 16px !important; }
}