/* ═══════════════════════════════════════════════════════════
   Utilities (la U de CUBE) — escritas a mano, pocas y con nombre propio.
   No es utility-first: son excepciones nombradas sobre los bloques, no el
   vocabulario principal. La sintesis de notas es explicita en que CUBE y
   Tailwind son modelos mentales enfrentados y hay que elegir uno.
   ═══════════════════════════════════════════════════════════ */

.text-xs   { font-size: var(--size-step--1); }
.text-sm   { font-size: var(--size-step-0); }
.text-base { font-size: var(--size-step-1); }
.text-lg   { font-size: var(--size-step-2); }
.text-xl   { font-size: var(--size-step-3); }

.text-muted   { color: var(--ink-muted); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }

.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.nowrap      { white-space: nowrap; }

/* Visualmente oculto pero legible por lectores de pantalla, y ALCANZABLE
   por Playwright con state="attached". Los marcadores de estado del
   workspace dependen de esto. */
.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.text-left { text-align: left; }

/* Pareja de visibilidad responsiva. Es la UNICA forma de alternar dos
   representaciones del mismo dato (tabla en escritorio, tarjetas en movil) sin
   media queries en linea, que no existen. Sin esto, la variante movil de
   equivalentes se habia quedado oculta a secas. */
.phone-only { display: block; }
.tablet-up  { display: none; }
@media (min-width: 48rem) {
  .phone-only { display: none; }
  .tablet-up  { display: block; }
  table.tablet-up { display: table; }
}