/*
 * RuniverseHub UI V2 · F13B Final Harmonization
 * Capa transversal acotada a .rh-v2-root.
 * No se carga en Rankings, detalle de ranking ni clasificaciones Legacy.
 */

.rh-v2-root {
  --rh-v2-readable-width: 68ch;
  --rh-v2-panel-padding: clamp(1rem, 1.8vw, 1.5rem);
  --rh-v2-section-gap: clamp(1.25rem, 2.4vw, 2rem);
  --rh-v2-row-height: 2.875rem;
  overflow-x: clip;
}

/* Jerarquía tipográfica única y más contenida. */
.rh-v2-root h1 {
  max-width: 24ch;
  font-size: clamp(1.875rem, 3vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.rh-v2-root h2 {
  max-width: 34ch;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.rh-v2-root h3 {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.25;
}

.rh-v2-root :where(p, li, dd, .rh-v2-card__description, .rh-v2-section__description, .rh-v2-page-header__description) {
  overflow-wrap: anywhere;
}

.rh-v2-root :where(.rh-v2-section__description, .rh-v2-page-header__description, .rh-v2-card__description) {
  max-width: var(--rh-v2-readable-width);
  line-height: 1.6;
}

.rh-v2-root :where(.rh-v2-metric__value, .rh-v2-kpi__value, [data-rh-v2-metric-value]) {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Ritmo y contenedores consistentes. */
.rh-v2-root .rh-v2-page {
  padding-block: clamp(1rem, 3vw, 2.25rem);
}

.rh-v2-root .rh-v2-container {
  width: min(100% - (2 * clamp(0.875rem, 3vw, 2rem)), 80rem);
}

.rh-v2-root .rh-v2-section {
  gap: var(--rh-v2-section-gap);
}

.rh-v2-root .rh-v2-section + .rh-v2-section {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.rh-v2-root .rh-v2-page-header,
.rh-v2-root .rh-v2-section__header,
.rh-v2-root .rh-v2-hero__content {
  min-width: 0;
}

.rh-v2-root .rh-v2-hero {
  gap: clamp(1rem, 2.5vw, 1.75rem);
  border-radius: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1rem, 3.4vw, 2rem);
}

/* Cards y paneles: misma densidad visual en todos los espacios. */
.rh-v2-root :where(.rh-v2-card, .rh-v2-data-toolbar, .rh-v2-data-table-shell, .rh-v2-data-mobile-card) {
  border-color: color-mix(in oklab, var(--rh-v2-color-border-strong) 72%, transparent);
}

.rh-v2-root :where(.rh-v2-card__header, .rh-v2-card__body, .rh-v2-card__footer) {
  padding-inline: var(--rh-v2-panel-padding);
}

.rh-v2-root .rh-v2-card__header {
  padding-top: var(--rh-v2-panel-padding);
  padding-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.rh-v2-root .rh-v2-card__body {
  padding-bottom: var(--rh-v2-panel-padding);
}

.rh-v2-root .rh-v2-card__footer {
  flex-wrap: wrap;
  padding-bottom: var(--rh-v2-panel-padding);
}

.rh-v2-root .rh-v2-card__title {
  overflow-wrap: anywhere;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

/* Controles: target táctil, densidad y foco coherentes. */
.rh-v2-root :where(
  .rh-v2-button,
  .rh-v2-input,
  .rh-v2-select,
  .rh-v2-data-search input,
  .rh-v2-data-sort select,
  button:not([class]),
  input[type="button"],
  input[type="submit"]
) {
  min-height: 2.75rem;
}

.rh-v2-root .rh-v2-button--icon,
.rh-v2-root .rh-v2-data-row-menu summary {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
}

.rh-v2-root :where(.rh-v2-button, .rh-v2-input, .rh-v2-select, .rh-v2-textarea) {
  border-radius: 0.75rem;
}

.rh-v2-root :where(.rh-v2-button, .rh-v2-data-row-menu summary) svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.rh-v2-root :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--rh-v2-context-accent) 78%, white);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--rh-v2-color-background) 76%, transparent);
}

.rh-v2-root :where([aria-current="page"], [aria-current="step"], .is-active) {
  scroll-margin-inline: 1rem;
}

.rh-v2-root :where([aria-disabled="true"], :disabled) {
  opacity: 0.58;
}

/* Estados y etiquetas largas sin desborde. */
.rh-v2-root :where(.rh-v2-badge, .rh-v2-chip, .rh-v2-data-filter-chip) {
  max-width: 100%;
  min-height: 1.75rem;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.rh-v2-root :where(.rh-v2-alert, .rh-v2-data-partial, [role="alert"], [role="status"]) {
  overflow-wrap: anywhere;
}

/* Tablas y valores operativos. */
.rh-v2-root .rh-v2-data-table {
  font-size: 0.875rem;
}

.rh-v2-root .rh-v2-data-table th,
.rh-v2-root .rh-v2-data-table td {
  min-height: var(--rh-v2-row-height);
  padding: 0.75rem 0.875rem;
}

.rh-v2-root .rh-v2-data-table th {
  background: color-mix(in oklab, var(--rh-v2-color-surface-2) 94%, transparent);
  color: color-mix(in oklab, var(--rh-v2-color-muted-foreground) 88%, white);
  letter-spacing: 0.015em;
}

.rh-v2-root :where(.rh-v2-data-table td, .rh-v2-data-mobile-card, .rh-v2-mono, code) {
  font-variant-numeric: tabular-nums;
}

.rh-v2-root :where(.rh-v2-data-table td, .rh-v2-data-mobile-card) a {
  overflow-wrap: anywhere;
}

/* Anclas y contenido enfocado no quedan detrás de headers sticky. */
.rh-v2-root :where(main, section, article, [id]) {
  scroll-margin-top: 6rem;
}

.rh-v2-root :target {
  outline: 2px solid color-mix(in oklab, var(--rh-v2-context-accent) 70%, transparent);
  outline-offset: 0.35rem;
}

/* Hover solo donde existe puntero preciso. */
@media (hover: hover) and (pointer: fine) {
  .rh-v2-root .rh-v2-card--interactive:hover {
    transform: translate3d(0, -2px, 0);
  }
}

@media (hover: none) {
  .rh-v2-root .rh-v2-card--interactive:hover,
  .rh-v2-root .rh-v2-button:hover {
    transform: none;
  }
}

/* Mobile real: no zoom involuntario, acciones legibles y cards compactas. */
@media (max-width: 47.99rem) {
  .rh-v2-root {
    --rh-v2-panel-padding: 1rem;
  }

  .rh-v2-root :where(.rh-v2-input, .rh-v2-select, .rh-v2-textarea, .rh-v2-data-search input, .rh-v2-data-sort select) {
    font-size: 1rem;
  }

  .rh-v2-root .rh-v2-page-header__actions,
  .rh-v2-root .rh-v2-button-group {
    align-items: stretch;
  }

  .rh-v2-root .rh-v2-hero {
    border-radius: 1rem;
  }

  .rh-v2-root .rh-v2-data-toolbar__main,
  .rh-v2-root .rh-v2-data-toolbar__meta,
  .rh-v2-root .rh-v2-data-workspace__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .rh-v2-root .rh-v2-data-toolbar__controls,
  .rh-v2-root .rh-v2-data-workspace__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 24.5rem) {
  .rh-v2-root .rh-v2-page-header__actions > *,
  .rh-v2-root .rh-v2-button-group > .rh-v2-button:not(.rh-v2-button--icon) {
    width: 100%;
  }
}

/* Preferencias de usuario. */
@media (prefers-reduced-motion: reduce) {
  .rh-v2-root,
  .rh-v2-root *,
  .rh-v2-root *::before,
  .rh-v2-root *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

@media (forced-colors: active) {
  .rh-v2-root :where(.rh-v2-card, .rh-v2-button, .rh-v2-input, .rh-v2-select, .rh-v2-textarea, .rh-v2-badge, .rh-v2-chip) {
    border: 1px solid CanvasText;
  }

  .rh-v2-root :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}