/* ── Contenedor principal ─────────────────────────────── */
.shell {
  max-width: 1020px;
  margin: 0 auto;
  padding: var(--space-6);
}

/* ── Barra superior ───────────────────────────────────── */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.brand svg  { color: var(--color-primary); }
.brand h1   { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.02em; }

.theme-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.theme-btn:hover { background: var(--color-surface-offset); }

/* ── Grilla principal (main + sidebar) ───────────────── */
.layout {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: var(--space-6);
  align-items: start;
}

/* ── Tarjeta base ─────────────────────────────────────── */
.card   { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.panel  { padding: var(--space-6); }
.stack  { display: flex; flex-direction: column; gap: var(--space-5); }

/* ── Utilitarios globales ─────────────────────────────── */
.hidden  { display: none !important; }
.divider { height: 1px; background: var(--color-divider); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .meta   { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .group-options { grid-template-columns: 1fr; }
  .group-opt     { border-right: none; border-bottom: 1px solid var(--color-border); }
  .meta          { grid-template-columns: 1fr 1fr; }
}