.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===== Barra superior ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--c-primary);
  color: #fff;
  border-bottom: 3px solid var(--c-accent);
}

.topbar__brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar__logo  { height: 30px; width: auto; }
.topbar__divider { width: 1px; height: 24px; background: rgba(255,255,255,.3); }
.topbar__title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__right { display: flex; align-items: center; gap: 16px; }

/* ===== Cuerpo ===== */
.shell {
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  align-items: start;
}

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
}

.main { padding: 20px 24px 40px; min-width: 0; }

.toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  padding-bottom: 14px;
  margin-bottom: var(--gap);
  border-bottom: 1px solid var(--c-border);
}
.toolbar__title   { font-size: 20px; color: var(--c-primary); }
.toolbar__actions { display: flex; gap: 8px; }

/* Cuadrícula del tablero: cada gráfica es una tarjeta */
.dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.dashboard > .card        { grid-column: span 6; }
.dashboard > .card--wide  { grid-column: span 12; }

/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .dashboard > .card { grid-column: span 12; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }
  .topbar__title, .topbar__divider { display: none; }
}