/* Programa de charlas = LÍNEA DE TIEMPO. UNA sola definición: la usan la agenda (agenda-evento.html) y
   el panel "Talk schedule" de la ficha del evento (event.html). El HTML lo arma lib/agenda-sesiones.js
   (slotsHtml / sesionHtml); la card de workshop con cupo es /workshop-card.css. */
/* ── Programa = LÍNEA DE TIEMPO ───────────────────────────────────────────────────────────
   Cada horario es un "slot": la hora a la izquierda UNA vez, un riel con un nodo del color del
   formato, y las sesiones en paralelo apiladas a la derecha (antes cada fila repetía su hora, y
   con 3 charlas a las 11:00 se leía como tres cosas distintas). Sin borde de color a un costado
   ni chips de sala/track en cada fila: eran la tarjeta genérica de cualquier app (pedido de
   Laura, 2026-10-02: "el talk schedule debería tener más diseño"). Colores = los de siempre
   (rosa charla, violeta keynote, verde lightning, ámbar panel, celeste workshop). */
.ag-slot { --c: #71717a; display: grid; grid-template-columns: 3.3rem 14px minmax(0, 1fr); column-gap: 10px; }
.ag-slot.is-charla { --c: #ec4899; } .ag-slot.is-keynote { --c: #a78bfa; } .ag-slot.is-panel { --c: #fbbf24; }
.ag-slot.is-lightning-talk { --c: #34d399; } .ag-slot.is-workshop { --c: #22d3ee; }
.ag-slot-time { padding-top: 11px; text-align: right; }
.ag-slot-time b { display: block; font-size: 1rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.ag-slot-time small { display: block; margin-top: 3px; font-size: 0.56rem; line-height: 1.25; letter-spacing: 0.04em; color: var(--muted-light); }
.ag-rail { position: relative; }
.ag-rail::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.10); }
.ag-node { position: absolute; left: 2px; top: 13px; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; background: #09090b; border: 2px solid var(--c); }
.ag-slot-items { min-width: 0; padding-bottom: 12px; }
.ag-slot:last-child .ag-slot-items { padding-bottom: 0; }
.ag-slot:last-child .ag-rail::before { bottom: auto; height: 20px; }

.ag-row { --c: #71717a; position: relative; margin-bottom: 8px; padding: 11px 14px 12px; border-radius: 12px; background: #101012; border: 1px solid rgba(255,255,255,0.07); transition: border-color 0.15s; }
.ag-row:last-child { margin-bottom: 0; }
.ag-row:hover { border-color: rgba(255,255,255,0.20); }
.ag-row.is-charla { --c: #ec4899; } .ag-row.is-keynote { --c: #a78bfa; } .ag-row.is-panel { --c: #fbbf24; }
.ag-row.is-lightning-talk { --c: #34d399; } .ag-row.is-workshop { --c: #22d3ee; }
.ag-row.is-keynote { background: #13111a; border-color: rgba(167,139,250,0.40); }
.ag-row.is-logistica { padding: 7px 0 2px; background: transparent; border: 0; opacity: 0.6; }
/* Con cupo (agenda) el workshop es una card propia (/workshop-card.css) y la fila es solo su contenedor (--ticket).
   Sin cupo (ficha del evento) es una fila común. */
.ag-row.ag-row--ticket { padding: 0; border: 0; border-radius: 16px; background: transparent; }
.ag-row-top { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 12px; padding-right: 26px; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-light); }
.ag-row-top .ag-sala { color: #d4d4d8; }
.ag-fmt { color: var(--c); font-weight: 700; }
.ag-fmt::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; border-radius: 1px; background: var(--c); }
.ag-row > .ag-fav-slot { position: absolute; top: 7px; right: 9px; line-height: 1; }
.ag-titulo { margin-top: 7px; padding-right: 22px; font-size: 0.92rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: #fff; }
.ag-row.is-keynote .ag-titulo { font-size: 1rem; font-weight: 700; }
.ag-row.is-logistica .ag-titulo { margin: 0; padding: 0; font-size: 0.78rem; font-weight: 500; color: var(--muted-light); }
.ag-row .wsc-speakers { margin-top: 10px; }
.ag-row .wsc-avs img { width: 24px; height: 24px; box-shadow: 0 0 0 2px #101012; }
.ag-row.is-keynote .wsc-avs img { box-shadow: 0 0 0 2px #13111a; }
.ag-row .wsc-names { font-size: 0.7rem; color: #a1a1aa; }

/* Distinta de .ag-badge a propósito: cuando una charla puntual es en
   OTRA dirección que la sede principal del evento (ej. los workshops
   in-person de Nerdearla, en un edificio aparte), un badge gris más
   se pierde entre sala/track/modalidad -- esto necesita leerse antes
   de que alguien vaya al lugar equivocado. */
.ag-ubicacion-propia {
    width: 100%; margin-top: 4px; padding: 5px 9px; border-radius: 8px;
    background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3);
    color: #fbbf24; font-size: 0.68rem; font-weight: 600;
    display: flex; align-items: center; gap: 5px;
}