/* Refinamento visual do painel com densidade e escala mais próximas da referência. */
:root { --canvas: #fafbf9; }
.app-shell { grid-template-columns: 255px 1fr; }
.sidebar { width: 255px; padding: 34px 24px 24px; }
.app-logo > span { width: 45px; height: 45px; border-radius: 50% 50% 50% 12px; font-size: 17px; }
.app-logo b { font-size: 18px; line-height: 1.05; }
.app-logo small { font-size: 9px; }
.sidebar nav { gap: 8px; margin-top: 48px; }
.nav-item { min-height: 52px; padding: 0 15px; border-radius: 10px; font-size: 13px; }
.nav-item.active { background: #e8efeb; color: #093d2f; }
.main { padding: 54px 44px 60px; }
.topbar small { margin-bottom: 8px; font-size: 11px; }
.topbar h1 { font-size: 39px; }
.topbar .primary-button { min-height: 48px; padding: 0 20px; font-size: 13px; }
.metrics { grid-template-columns: repeat(4, minmax(165px, 1fr)); gap: 15px; margin: 40px 0 26px; }
.metrics article { min-height: 118px; padding: 22px; border-color: #cfd8d3; border-radius: 12px; }
.metric-label { font-size: 12px; }
.metrics strong { margin-top: 12px; font-size: 31px; }
.metrics small { margin-top: 3px; font-size: 9px; }
.toolbar { justify-content: flex-end; margin-top: -144px; margin-bottom: 77px; pointer-events: none; }
.toolbar .search { width: min(360px, 27%); min-height: 48px; pointer-events: auto; }
.toolbar .search input { font-size: 12px; }
.toolbar .text-button { display: none; }
.pipeline { gap: 14px; }
.column { min-height: 510px; padding: 14px; border-radius: 13px; background: #eef2ef; }
.column > header { padding: 4px 4px 15px; }
.column > header b { font-size: 11px; }
.lead-card { padding: 15px; border-color: #cbd5d0; border-radius: 10px; }
.lead-identity { display: flex; align-items: center; gap: 9px; }
.lead-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #dfeae4; color: #176b51; font-size: 8px; font-weight: 800; }
.lead-card h3 { font-size: 13px; }
.lead-service { margin: 11px 0 12px; color: #34423d; font-size: 10px; }
.lead-meta span { padding: 0; background: transparent; color: #596760; font-size: 9px; }
.lead-value { margin-top: 14px; }
.lead-value b { font-size: 12px; }
.lead-card select { min-height: 33px; max-width: 115px; padding: 0 7px; border-radius: 7px; background: #edf1ef; font-size: 9px; }
.user > span { border-radius: 50%; }

@media (max-width: 1180px) {
  .toolbar { margin: 0 0 17px; pointer-events: auto; }
  .toolbar .search { width: min(360px, 100%); }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { width: auto; }
  .main { padding: 27px 14px 45px; }
  .metrics { grid-template-columns: 1fr 1fr; }
}