/**
 * Realyvax Starter — Utilidades
 * Clases de propósito único. Prefijo rvx-.
 */

/* ── Layout ── */
.rvx-fit-content   { display: inline-block; width: fit-content; }
.rvx-full-width    { width: 100%; }
.rvx-sr-only       { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ── Glass / Blur ── */
.rvx-glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.rvx-glass-dark {
  background: rgba(31, 35, 40, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Secciones ── */
.rvx-section         { padding-block: var(--rvx-section-md); }
.rvx-section--sm     { padding-block: var(--rvx-section-sm); }
.rvx-section--lg     { padding-block: var(--rvx-section-lg); }
.rvx-section--alt    { background-color: var(--rvx-color-light); }
.rvx-section--dark   { background-color: var(--rvx-color-dark); color: var(--rvx-color-white); }
.rvx-section--primary{ background-color: var(--rvx-color-primary); color: var(--rvx-color-white); }

/* Flush content area: elimina el margin-top del área de contenido */
.rvx-content-flush .content-area,
.rvx-content-flush.content-area { margin-top: 0; }

/* ── Stack (vertical gap) ── */
.rvx-stack    { display: grid; gap: var(--rvx-space-4); }
.rvx-stack--sm{ display: grid; gap: var(--rvx-space-2); }
.rvx-stack--lg{ display: grid; gap: var(--rvx-space-8); }

/* ── Textos ── */
.rvx-text-primary   { color: var(--rvx-color-primary); }
.rvx-text-secondary { color: var(--rvx-color-secondary); }
.rvx-text-accent    { color: var(--rvx-color-accent); }
.rvx-text-muted     { color: var(--rvx-text-muted); }
.rvx-text-white     { color: var(--rvx-color-white); }
.rvx-text-center    { text-align: center; }
.rvx-text-left      { text-align: left; }
.rvx-text-right     { text-align: right; }

/* ── Badge / Pill ── */
.rvx-badge {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: var(--rvx-radius-full);
  font-size: var(--rvx-text-xs);
  font-weight: var(--rvx-weight-semibold);
  line-height: 1.5;
  background: var(--rvx-color-light);
  color: var(--rvx-color-secondary);
  border: 1px solid var(--rvx-color-border);
}
.rvx-badge--primary { background: var(--rvx-color-primary); color: #fff; border-color: transparent; }
.rvx-badge--accent  { background: var(--rvx-color-accent);  color: #fff; border-color: transparent; }
.rvx-badge--white   { background: #fff; color: var(--rvx-color-dark); border-color: rgba(0,0,0,.1); }

/* ── Cursores y links ── */
button, a, .kb-button, .kadence-button { cursor: pointer; }