/* ============================================================================
   HAYESHI · Utilidades
   ============================================================================

   Va DE ÚLTIMA en el orden de carga: una utilidad tiene que poder ganarle a un
   componente sin subir la especificidad con `!important`. Con la misma
   especificidad, gana la que se declara después — por eso el orden lo fija el
   layout a mano y no `stylesheet_link_tag :app`, que ordena alfabéticamente
   (propshaft/helper.rb:112) y pondría `utilities` antes que `tokens`.

   La lista es corta a propósito. Esto no es Tailwind: si una utilidad se repite
   en tres vistas, es un componente y le toca su clase en components.css.
   -------------------------------------------------------------------------- */

.text-secondary {
  color: var(--color-text-secondary);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-danger {
  color: var(--color-danger);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-strong {
  font-weight: 600;
}

/* Cifras y fechas en columna. Sin esto, «45.000» y «120.000» no alinean sus
   dígitos y comparar de un vistazo cuesta. */
.numeric {
  font-variant-numeric: tabular-nums;
}

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

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.section {
  margin-bottom: var(--space-8);
}

/* Corta con puntos suspensivos. `min-width: 0` va incluido porque un hijo de
   flex no encoge por debajo de su contenido sin él, y sin encoger no hay
   truncado — es el bug clásico de los nombres largos en una fila de tabla. */
.truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Para lo que no debe salir en la impresión ni en un PDF: la navegación y los
   botones. El dueño imprime listados de asistencia. */
@media print {
  .header,
  .footer,
  .flash,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .main {
    padding-block: 0;
  }
}