/* RuniverseHub UI V2 · Layouts compartidos, sin navegación ni dominios */

.rh-v2-page {
  min-height: 100dvh;
  padding-block: clamp(var(--rh-v2-space-5), 4vw, var(--rh-v2-space-10));
}

.rh-v2-container {
  width: min(100% - (2 * var(--rh-v2-gutter)), var(--rh-v2-container-2xl));
  margin-inline: auto;
}

.rh-v2-container--sm { max-width: var(--rh-v2-container-sm); }
.rh-v2-container--md { max-width: var(--rh-v2-container-md); }
.rh-v2-container--lg { max-width: var(--rh-v2-container-lg); }
.rh-v2-container--xl { max-width: var(--rh-v2-container-xl); }

.rh-v2-stack {
  display: flex;
  flex-direction: column;
  gap: var(--rh-v2-stack-gap, var(--rh-v2-space-4));
}

.rh-v2-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rh-v2-cluster-gap, var(--rh-v2-space-3));
}

.rh-v2-cluster--between {
  justify-content: space-between;
}

.rh-v2-grid {
  display: grid;
  gap: var(--rh-v2-grid-gap, var(--rh-v2-space-4));
}

.rh-v2-grid--2,
.rh-v2-grid--3,
.rh-v2-grid--4 {
  grid-template-columns: minmax(0, 1fr);
}

.rh-v2-section {
  display: grid;
  gap: var(--rh-v2-space-5);
}

.rh-v2-section + .rh-v2-section {
  margin-top: clamp(var(--rh-v2-space-8), 6vw, var(--rh-v2-space-14));
}

.rh-v2-section__header {
  display: grid;
  gap: var(--rh-v2-space-2);
  max-width: 48rem;
}

.rh-v2-section__eyebrow,
.rh-v2-page-header__eyebrow {
  color: var(--rh-v2-context-accent);
  font-size: var(--rh-v2-text-xs);
  font-weight: var(--rh-v2-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rh-v2-section__description,
.rh-v2-page-header__description {
  max-width: 46rem;
  color: var(--rh-v2-color-muted-foreground);
  font-size: var(--rh-v2-text-sm);
  line-height: var(--rh-v2-leading-relaxed);
}

.rh-v2-page-header {
  display: grid;
  gap: var(--rh-v2-space-4);
  align-items: end;
}

.rh-v2-page-header__main {
  display: grid;
  gap: var(--rh-v2-space-2);
  min-width: 0;
}

.rh-v2-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rh-v2-space-2);
}

.rh-v2-hero {
  position: relative;
  display: grid;
  gap: var(--rh-v2-space-6);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--rh-v2-context-accent) 30%, var(--rh-v2-color-border));
  border-radius: var(--rh-v2-radius-2xl);
  background:
    radial-gradient(620px 320px at 12% 0%, color-mix(in oklab, var(--rh-v2-context-accent) 20%, transparent), transparent 62%),
    linear-gradient(135deg, var(--rh-v2-color-surface-2), var(--rh-v2-color-surface));
  padding: clamp(var(--rh-v2-space-5), 5vw, var(--rh-v2-space-10));
  box-shadow: var(--rh-v2-shadow-panel);
}

.rh-v2-hero__content {
  display: grid;
  gap: var(--rh-v2-space-4);
  max-width: 52rem;
}

.rh-v2-hero__aside {
  align-self: stretch;
}

.rh-v2-split {
  display: grid;
  gap: var(--rh-v2-space-6);
}

.rh-v2-sidebar-layout {
  display: grid;
  gap: var(--rh-v2-space-6);
}

.rh-v2-sticky-region {
  position: sticky;
  top: var(--rh-v2-space-4);
  z-index: var(--rh-v2-z-sticky);
}

.rh-v2-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rh-v2-space-3);
}

.rh-v2-flow > * + * {
  margin-top: var(--rh-v2-flow-space, var(--rh-v2-space-4));
}

.rh-v2-full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

@media (min-width: 40rem) {
  .rh-v2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-v2-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-v2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-v2-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .rh-v2-page-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rh-v2-page-header__actions {
    justify-content: flex-end;
  }

  .rh-v2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rh-v2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .rh-v2-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 0.5fr);
    align-items: center;
  }

  .rh-v2-split--equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-v2-split--wide { grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.55fr); }
}

@media (min-width: 64rem) {
  .rh-v2-sidebar-layout {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.34fr);
    align-items: start;
  }
}

@media (max-width: 30rem) {
  .rh-v2-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rh-v2-page-header__actions > * {
    width: 100%;
  }
}