/* ============================================================
   HUF — Componente: Timeline (.hd-timeline)
   ------------------------------------------------------------
   Vehículo: TagHelper <hd-timeline> + <hd-timeline-entry>.

   Actividad reciente de un registro. DISCRETA por definición: es
   contexto, no es el objeto dominante de ninguna pantalla.

   Dos restricciones que vienen de la ley y acotan dónde puede usarse:

   1. **HVL §7.3 — regla del indicador útil.** Todo lo que se muestra
      debe responder "¿y qué hago con esto?". Un timeline de solo
      lectura no lo responde, así que **cada entrada enlaza al registro
      que la originó**. Una entrada sin destino es un dato de reporte,
      no de operación, y no pertenece aquí.

   2. **HVL §7.4 — ninguna franja vacía de más de 120px.** Este
      componente NO se usa como banda horizontal en una pantalla de
      listado. Su lugar es el detalle de un registro (incluida la fila
      expandible de una tabla), el rail lateral del Workspace, o una
      página de actividad dedicada (tercer placement, desde 2026-08-11:
      AdminPortal/Pages/Actividad).

   Nota de datos (actualizada 2026-08-11): además de login_ok/login_fail/
   password_cambiada/rate_limit_bloqueado, `IAuditoriaService` ya
   instrumenta 5 eventos de negocio con Entidad/EntidadId reales (pedido,
   cierre de caja, pago, suscripción) — ver /admin/actividad.
   ============================================================ */

.hd-timeline {
    display: flex;
    flex-direction: column;
    /* Sin gap: el separador de 1px entre entradas ya crea el ritmo, y
       sumar espacio además de línea es exactamente lo que la ley de
       bordes anidados evita (HVL §5.2). */
}

.hd-timeline__entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--hd-space-3);
    padding: var(--hd-space-3) 0;
    border-bottom: 1px solid var(--hd-color-border);
    text-decoration: none;
    color: inherit;
    transition: background var(--hd-motion-standard) var(--hd-ease);
}

.hd-timeline__entry:last-child {
    border-bottom: none;
}

/* Es un enlace (HVL §7.3): tiene que verse que lleva a algún sitio. */
a.hd-timeline__entry:hover {
    background: rgba(148, 163, 184, 0.06);
}

a.hd-timeline__entry:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: calc(var(--hd-focus-offset) * -1);
    border-radius: var(--hd-radius-sm);
}

/* Marca temporal: número tabular para que la columna no baile entre
   filas (HVL §4, numeral tabular). */
.hd-timeline__time {
    font-size: var(--hd-text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--hd-theme-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-top: 2px;
    min-width: 6rem;
}

.hd-timeline__body {
    min-width: 0;
}

/* Ambos son <span> (van dentro de un <a>, donde un <div> sería markup
   inválido), así que necesitan `display: block` explícito — si no, etiqueta y
   actor se renderizan pegados en la misma línea ("Empresa creadamaría"),
   detectado en la verificación de la galería. */
.hd-timeline__label {
    display: block;
    font-size: var(--hd-text-caption);
    color: var(--hd-theme-text);
}

.hd-timeline__actor {
    display: block;
    font-size: var(--hd-text-micro);
    color: var(--hd-theme-text-muted);
    margin-top: 2px;
}

/* Variante compacta para el interior de una fila expandida, donde el
   espacio ya está prestado por la tabla. */
.hd-timeline--compact .hd-timeline__entry {
    padding: var(--hd-space-2) 0;
}

@media (max-width: 575.98px) {
    .hd-timeline__entry {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--hd-space-1);
    }

    .hd-timeline__time {
        min-width: 0;
    }
}