/* ============================================================================
   █  3. TIMELINE — el cronograma y el panel de detalle
   ============================================================================
   ÍNDICE (usa Cmd+F para saltar):
     [1] Zona principal y barra de herramientas
     [2] Franja de EVENTOS (arriba)
     [3] BARRAS de estéticas        ← aspecto de las barras y su selección
     [4] Líneas de RELACIÓN         ← las curvas que unen estéticas
     [5] Eje de AÑOS (abajo)
     [6] Mensajes de estado (cargando / error)
     [7] PANEL DE DETALLE (derecha)
   ============================================================================ */


/* ══════════════════════════════════════════════════════════════════════
   [1] ZONA PRINCIPAL
   ══════════════════════════════════════════════════════════════════════ */
/* ⭐ Igual que el menú: tarjeta flotante con esquinas redondeadas y sombra,
   SIN líneas divisorias respecto al resto de la página. */
.stage {
  display: flex; flex-direction: column;
  min-width: 0;                       /* deja que el contenido tenga scroll horizontal */
  background: hsl(var(--background));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ── Barra de herramientas (zoom, buscador, filtros) — sin línea, solo aire ── */
.toolbar {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 3.75rem; padding: 0 var(--sp-5);
  flex: none;
}
.toolbar__group { display: flex; align-items: center; gap: var(--sp-1); }
.toolbar__value {
  min-width: 3.5rem; text-align: center;
  font-size: var(--fs-sm); color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;   /* números de ancho fijo: no "bailan" */
}
.toolbar__spacer { flex: 1; }

/* Buscador y filtros dentro del toolbar (junto a "Fit") */
.field--toolbar { width: 200px; }
.field--toolbar .field__input { height: 2.25rem; }
.toggle-row--toolbar { display: flex; flex-direction: row; gap: var(--sp-1); }
.toggle-row--toolbar .toggle { min-height: 2.25rem; padding: 0 var(--sp-2); border-radius: var(--radius-md); }
@media (max-width: 900px) { .field--toolbar, .toggle-row--toolbar { display: none; } }

/* ── Zona con scroll donde vive el cronograma ── */
.viewport { position: relative; flex: 1; overflow: auto; overscroll-behavior: contain; }
.viewport:focus-visible { box-shadow: inset 0 0 0 3px hsl(var(--ring) / 0.5); }
/* min-height 100% hace que el eje de años quede siempre pegado abajo */
.canvas { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.lanes-wrap { flex: 1; }


/* ══════════════════════════════════════════════════════════════════════
   [2] FRANJA DE EVENTOS (arriba, fija al hacer scroll)
   ⭐ Su altura se cambia con --rail-h en tokens.css
   ══════════════════════════════════════════════════════════════════════ */
.rail {
  position: sticky; top: 0; z-index: 6; flex: none;
  height: var(--rail-h);
  background: hsl(var(--background));   /* mismo fondo que el resto: sin línea divisoria */
}
.event {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 var(--sp-1) var(--sp-2);
  transform: translateX(-50%);
  color: hsl(var(--muted-foreground));
  border-radius: var(--radius-sm);
  transition: color var(--dur-1) var(--ease);
}
.event:hover, .event:focus-visible { color: hsl(var(--foreground)); }
.event__glyph { width: 10px; height: 10px; margin-bottom: 3px; }
.event__glyph svg { width: 10px; height: 10px; }
/* La linea vertical fina bajo cada evento */
.event__tick { width: 1px; flex: 1; background: hsl(var(--border)); }
.event:hover .event__tick, .event:focus-visible .event__tick { background: hsl(var(--foreground) / 0.3); }
/* Etiqueta con el número cuando varios eventos caen muy juntos.
   Va ENCIMA del símbolo, no superpuesta. */
.event__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 3px; margin-bottom: 3px;
  font-size: 10px; font-weight: 500; line-height: 1;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  border-radius: 999px;
}
.event:hover .event__count, .event:focus-visible .event__count {
  color: hsl(var(--primary-foreground)); background: hsl(var(--primary));
}


/* ══════════════════════════════════════════════════════════════════════
   [3] BARRAS DE ESTÉTICAS   ⭐⭐ LA PARTE MÁS IMPORTANTE DEL ASPECTO
   ══════════════════════════════════════════════════════════════════════
   · Alto de barra y separación: --bar-h y --lane-h en tokens.css
   · Color de fondo normal:      --secondary
   · Color al seleccionar:       --primary
   Las barras NO llevan borde: usan fondo gris suave (estilo shadcn).
   Eso es lo que quita el aspecto "ventana antigua".                     */
.lanes-wrap { position: relative; }
.lanes { position: relative; z-index: 1; }

/* ⭐ Todas las barras usan el MISMO gris (--bar-color) y forma de píldora
   (esquinas totalmente redondeadas). El color no distingue estéticas:
   solo la SELECCIÓN (negro) y la RELACIÓN (aro) usan énfasis. */
.bar {
  position: absolute;
  height: var(--bar-h);
  display: flex; align-items: center;
  padding: 0 var(--sp-3);
  border-radius: 999px;
  background: hsl(var(--bar-color, var(--secondary)));
  color: hsl(0 0% 100%);         /* texto blanco: contraste sobre el gris medio */
  overflow: hidden; text-align: left;
  transition: background-color var(--dur-1) var(--ease),
              opacity var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
.bar__label {
  font-size: var(--fs-bar); font-weight: 500; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar:hover { background: hsl(var(--bar-color) / 0.85); box-shadow: var(--shadow-xs); }

/* ── Estados al SELECCIONAR una estética ──────────────────────────────
   Al elegir una, las no relacionadas se atenúan para poder leer mejor.
   ⭐ ¿Demasiado apagadas? Sube el 0.25 (por ejemplo a 0.4).             */
.lanes.has-selection .bar { opacity: 0.25; }
.lanes.has-selection .bar.is-related,
.lanes.has-selection .bar.is-selected { opacity: 1; }

/* La estética SELECCIONADA: fondo negro */
.bar.is-selected {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-sm);
}
.bar.is-selected .bar__label { font-weight: 600; }

/* Las estéticas RELACIONADAS: fondo blanco con un aro fino (no un borde grueso) */
.bar.is-related {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: inset 0 0 0 1.5px hsl(var(--primary));
}
.bar.is-related .bar__label { font-weight: 600; }


/* ══════════════════════════════════════════════════════════════════════
   [4] LÍNEAS DE RELACIÓN (las curvas dibujadas sobre la timeline)
   ⭐ El GROSOR y el estilo de línea de cada tipo (parent, influence…)
      se definen en js/config.js → TL.REL_TYPES
   ══════════════════════════════════════════════════════════════════════ */
.relations {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%;
  pointer-events: none;              /* no bloquea los clics sobre las barras */
  overflow: visible;
}
.relations path { fill: none; stroke: hsl(var(--foreground)); stroke-width: 1.5; }
.relations .rel-line { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.relations.is-active .rel-line { opacity: 0.75; }   /* ⭐ sube a 1 para curvas más marcadas */


/* ══════════════════════════════════════════════════════════════════════
   [5] EJE DE AÑOS (abajo, fijo al hacer scroll)
   ══════════════════════════════════════════════════════════════════════ */
.axis {
  position: sticky; bottom: 0; z-index: 6; flex: none;
  height: var(--axis-h);
  background: hsl(var(--background));   /* mismo fondo: sin línea divisoria */
}
.tick { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); }
.tick__label {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  font-size: var(--fs-xs); color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Líneas verticales de fondo.
   ⭐ ¿Te molestan? Baja la opacidad (0.5 → 0.25) o pon "display: none". */
.gridline {
  position: absolute; top: 0; bottom: 0; z-index: 0; width: 1px;
  background: hsl(var(--border) / 0.5);
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════
   [6] MENSAJES DE ESTADO (cargando / sin datos / error)
   ══════════════════════════════════════════════════════════════════════ */
.status {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: hsl(var(--background) / 0.85);
  backdrop-filter: blur(2px);
}
.status__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; padding: var(--sp-6); }
.status__msg { font-size: var(--fs-sm); color: hsl(var(--muted-foreground)); max-width: 42ch; }


/* ══════════════════════════════════════════════════════════════════════
   [7] PANEL DE DETALLE (derecha)
   ⭐ Su ancho se cambia con --panel-w en tokens.css
   ══════════════════════════════════════════════════════════════════════ */
.panel {
  display: flex; flex-direction: column; min-width: 0;
  background: hsl(var(--background));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.panel__head {
  position: relative; flex: none;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.panel__eyebrow {                         /* la palabra pequeña "MOVEMENT" */
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.panel__title {
  font-size: var(--fs-2xl); font-weight: 600;
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  margin-top: var(--sp-1); padding-right: var(--sp-8);
}
.panel__close { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.panel__body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-6); }

/* Imagen de cabecera */
.panel__figure {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
}
.panel__figure img { width: 100%; height: 150px; object-fit: cover; }

/* Fechas y duración */
.panel__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); color: hsl(var(--muted-foreground)); }
.panel__meta strong { color: hsl(var(--foreground)); font-weight: 600; font-variant-numeric: tabular-nums; }
.panel__desc { font-size: var(--fs-sm); line-height: var(--lh-normal); color: hsl(var(--muted-foreground)); }

/* Secciones ("RELATIONSHIPS", "RELATED EVENTS") */
.panel__section { display: flex; flex-direction: column; gap: var(--sp-3); }
.panel__section-h {
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* Grupo de relaciones por tipo */
.rel-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.rel-group__h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 500; }
.rel-group__swatch { width: 26px; height: 10px; flex: none; }

/* Cada relación es una tarjeta ("Card" de shadcn) */
.rel-item {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left;
  padding: var(--sp-3);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur-1) var(--ease);
}
.rel-item:hover { background: hsl(var(--accent)); }
.rel-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.rel-item__name { font-size: var(--fs-sm); font-weight: 500; }
.rel-item__weight { font-size: 10px; color: hsl(var(--muted-foreground)); letter-spacing: 0.15em; flex: none; }
.rel-item__desc { font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); line-height: var(--lh-snug); }
.rel-item__years { font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }

/* Lista de eventos del periodo */
.evt-item { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid hsl(var(--border)); }
.evt-item:last-child { border-bottom: 0; }
.evt-item__year { flex: none; width: 3rem; font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.evt-item__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.evt-item__name { font-size: var(--fs-sm); }
.evt-item__type { font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); }

/* Enlace externo y mensaje de "sin datos" */
.panel__link { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.panel__empty { font-size: var(--fs-sm); color: hsl(var(--muted-foreground)); }