/* ============================================================================
   Valdra · Sistema de diseño — utilidades

   Un puñado de clases de layout, con prefijo `vx-` para no colisionar con
   ninguna de las 25 vistas existentes, que los primitivos de static/console/ui
   componen en vez de escribir flexbox a mano en cada uno.
   ============================================================================ */

.vx-row {
  display: flex;
  align-items: center;
}
.vx-col {
  display: flex;
  flex-direction: column;
}
.vx-stack-1 { display: flex; flex-direction: column; gap: var(--s1, 4px); }
.vx-stack-2 { display: flex; flex-direction: column; gap: var(--s2, 8px); }
.vx-stack-3 { display: flex; flex-direction: column; gap: var(--s3, 12px); }
.vx-stack-4 { display: flex; flex-direction: column; gap: var(--s4, 16px); }
.vx-cluster-1 { display: flex; align-items: center; gap: var(--s1, 4px); flex-wrap: wrap; }
.vx-cluster-2 { display: flex; align-items: center; gap: var(--s2, 8px); flex-wrap: wrap; }
.vx-cluster-3 { display: flex; align-items: center; gap: var(--s3, 12px); flex-wrap: wrap; }

.vx-grow { flex: 1 1 auto; min-width: 0; }
.vx-shrink-0 { flex-shrink: 0; }

.vx-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vx-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Anillo de foco consistente para cualquier primitivo interactivo — botón,
   tarjeta, chip. Nunca `outline: none` sin sustituto: eso es lo primero que
   rompe la navegación por teclado. */
.vx-focusable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--border-active);
}
.vx-focusable-on-command:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-command), 0 0 0 4px var(--accent-ai);
}

.vx-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-2, var(--surface-card));
  border-radius: var(--radius-md);
  color: transparent !important;
}
@media (prefers-reduced-motion: no-preference) {
  .vx-skeleton::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-primary) 6%, transparent), transparent);
    animation: vx-skeleton-sweep 1.4s ease-in-out infinite;
  }
  @keyframes vx-skeleton-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
  }
}