/* hoyc.css — «Lo que Gu hizo hoy» (#hoy): la bitácora de un martes cualquiera, viva. Una línea de luz baja con el scroll
 * y cada momento se enciende al llegar, con su pieza real a la derecha (renglones sobre líneas, sin cajas).
 * Opción C de opciones-hoy.html. No promete una pantalla de registro (no existe en /app, Parkboard var(--k111122)). */
.hc { position: relative; list-style: none; margin: 0; padding: 0 0 0 220px; }
.hc-riel { position: absolute; left: 184px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.hc-riel i { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: linear-gradient(rgb(var(--t1) / .2), var(--b1) 85%, var(--b2)); box-shadow: 0 0 8px rgb(var(--t1) / .7); }
.hc-m { position: relative; padding: 34px 0 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
.hc-riel + .hc-m { border-top: 0; }
.hc-m time { position: absolute; left: -220px; top: 36px; width: 150px; color: var(--dim); font-size: 14.5px; font-variant-numeric: tabular-nums; transition: color .4s; }
.hc-m::before { content: ""; position: absolute; left: -40.5px; top: 42px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line2); transition: background .4s, border-color .4s, box-shadow .4s; }
.hc-m h3 { font-size: 26px; font-weight: 800; letter-spacing: -.025em; color: var(--k2a2c31); transition: color .5s; line-height: 1.12; margin: 0; }
.hc-m p { margin: 8px 0 0; color: var(--k2a2c31); max-width: 52ch; transition: color .5s; }
.hc-ui { display: grid; font-size: 13.5px; border-top: 1px solid var(--line); align-self: start; opacity: 0; transform: translateY(8px); transition: opacity .5s .15s, transform .5s .15s; }
.hc-ui > span { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hc-ui > span small { color: var(--muted); font-size: 12.5px; text-align: right; }
.hc-ui .hc-btn { display: block; text-align: center; font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ke6e8eb); }
.hc-ui .hc-q { color: var(--muted); font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hc-m.on time { color: var(--fg); } .hc-m.on h3 { color: var(--fg); } .hc-m.on p { color: var(--muted); } .hc-m.on .hc-ui { opacity: 1; transform: none; }
.hc-m.on::before { background: var(--cta-fill); border-color: var(--cta-fill); box-shadow: 0 0 0 5px rgb(var(--t1) / .22); }
@media (max-width: 900px) {
  .hc { padding-left: 26px; }
  .hc-riel { left: 4px; }
  .hc-m { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 0 30px; }
  .hc-m time { position: static; display: block; margin-bottom: 4px; width: auto; }
  .hc-m::before { left: -26.5px; top: 28px; }
  .hc-m h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .hc-m, .hc-m *, .hc-m::before { transition: none !important; } }