/**
 * timeline-intervals.css
 * Estilos modulares para sistema de timeline con barras de intervalos
 * Soporta orientación horizontal y vertical
 * Compatible con MusicalMatrix y otras apps
 */

/* ========== VARIABLES CSS ========== */
:root {
  /* Colores de timeline */
  --timeline-line-color: #FFBB33;
  --timeline-pulse-color: #FFBB33;
  --timeline-interval-color: #FFBB33;

  /* Tamaños de elementos */
  --timeline-pulse-size: 12px;
  --timeline-line-thickness: 2px;
  --timeline-interval-bar-height: 5px;
  --timeline-interval-bar-scale: 0.87;

  /* Animaciones */
  --timeline-pulse-anim-duration: 0.35s;

  /* Posiciones de números (%) */
  --timeline-pulse-number-position: 90%;
  --timeline-interval-number-position: 0%;

  /* Font sizes */
  --timeline-pulse-number-size: 1.8rem;
  --timeline-interval-number-size: 1.8rem;
  --timeline-number-opacity: 0.85;
}

[data-theme="dark"] {
  --timeline-line-color: #FFBB33;
}

/* ========== TIMELINE CONTAINER ========== */
.timeline-wrapper {
  width: 100%;
  max-width: 900px;
  margin: 0px auto 40px;
  position: relative;
  z-index: 1;  /* Keep below menus (z-index: 1100) */
  opacity: 1 !important;
  padding: 0 20px;
}

.timeline {
  position: relative;
  height: 120px;
  transition: transform 0.6s ease;
}

/* Línea horizontal de fondo */
.timeline::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: var(--timeline-line-thickness);
  background: var(--timeline-line-color);
  transform: translateY(-50%);
  pointer-events: none;
}

/* ========== PULSOS (DOTS) ========== */
.timeline .pulse {
  position: absolute;
  top: 50%;
  width: var(--timeline-pulse-size);
  height: var(--timeline-pulse-size);
  border-radius: 50%;
  background: var(--timeline-pulse-color) !important;
  transform: translate(-50%, -50%);
  --pulse-flash-base-transform: translate(-50%, -50%);
  cursor: default;
  transition: left 0.4s ease, top 0.4s ease, transform 0.15s ease,
              box-shadow 0.15s ease, background-color 0.15s ease;
  z-index: 10 !important;
}

/* Estado activo con highlight (usa animación compartida de app-common/styles.css) */
.timeline .pulse.active {
  animation: pulseFlash var(--timeline-pulse-anim-duration) ease-out;
  box-shadow: 0 0 14px var(--selection-color), 0 0 20px currentColor;
}

/* ========== NÚMEROS DE PULSOS ========== */
.timeline .pulse-number {
  position: absolute;
  top: var(--timeline-pulse-number-position) !important;
  font-size: var(--timeline-pulse-number-size);
  font-weight: 400;
  color: var(--timeline-pulse-color);
  transform: translateX(-50%);
  user-select: none;
  z-index: 20;
  opacity: var(--timeline-number-opacity);
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

/* ========== NÚMEROS DE INTERVALOS ========== */
.timeline .interval-number {
  position: absolute;
  top: var(--timeline-interval-number-position) !important;
  font-size: var(--timeline-interval-number-size);
  font-weight: 400;
  color: var(--color-lg);
  transform: translateX(-50%);
  user-select: none;
  z-index: 15;
  opacity: var(--timeline-number-opacity);
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

/* ========== BARRAS DE INTERVALOS (HORIZONTAL) ========== */
/* Barras individuales que representan cada intervalo, delimitadas por líneas de pulso */
.timeline .interval-bar.horizontal {
  position: absolute;
  top: 53%;
  transform: translateY(-180%); /* Justo ENCIMA de la línea temporal */
  height: var(--timeline-interval-bar-height);
  background: var(--timeline-interval-color);
  opacity: 0.2;
  border-radius: 2px;
  pointer-events: none;
  scale: var(--timeline-interval-bar-scale);
  z-index: 3; /* Debajo de pulsos */
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Para musical-grid: barras en timeline-inner */
.timeline-inner .interval-bar.horizontal {
  position: absolute;
  top: 20px; /* Posición fija desde arriba */
  height: var(--timeline-interval-bar-height);
  background: var(--timeline-interval-color);
  opacity: 0.2;
  border-radius: 2px;
  pointer-events: none;
  scale: var(--timeline-interval-bar-scale);
  z-index: 3;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Estado activo durante reproducción */
.timeline .interval-bar.horizontal.active,
.timeline-inner .interval-bar.horizontal.active {
  background: var(--timeline-interval-color);
  opacity: 0.7;
  box-shadow: 0 0 8px var(--timeline-interval-color);
}

/* Tema oscuro */
[data-theme="dark"] .timeline .interval-bar.horizontal,
[data-theme="dark"] .timeline-inner .interval-bar.horizontal {
  opacity: 0.25;
}

[data-theme="dark"] .timeline .interval-bar.horizontal.active,
[data-theme="dark"] .timeline-inner .interval-bar.horizontal.active {
  background: var(--timeline-interval-color);
  opacity: 0.8;
  box-shadow: 0 0 10px var(--timeline-interval-color);
}

/* ========== BARRAS DE INTERVALOS (VERTICAL) ========== */
/* Para MusicalMatrix y otras apps con orientación vertical */
.timeline .interval-bar.vertical {
  position: absolute;
  left: 53%;
  transform: translateX(-180%);
  width: var(--timeline-interval-bar-height);
  background: var(--timeline-interval-color);
  opacity: 0.2;
  border-radius: 2px;
  pointer-events: none;
  scale: var(--timeline-interval-bar-scale);
  z-index: 3;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Para musical-grid: barras en soundline-inner */
.soundline-inner .interval-bar.vertical {
  position: absolute;
  left: 100px; /* Posición fija desde la izquierda (junto a la línea vertical) */
  width: var(--timeline-interval-bar-height);
  background: var(--timeline-interval-color);
  opacity: 0.2;
  border-radius: 2px;
  pointer-events: none;
  scale: var(--timeline-interval-bar-scale);
  z-index: 3;
  transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.timeline .interval-bar.vertical.active,
.soundline-inner .interval-bar.vertical.active {
  background: var(--timeline-interval-color);
  opacity: 0.7;
  box-shadow: 0 0 8px var(--timeline-interval-color);
}

[data-theme="dark"] .timeline .interval-bar.vertical,
[data-theme="dark"] .soundline-inner .interval-bar.vertical {
  opacity: 0.25;
}

[data-theme="dark"] .timeline .interval-bar.vertical.active,
[data-theme="dark"] .soundline-inner .interval-bar.vertical.active {
  background: var(--timeline-interval-color);
  opacity: 0.8;
  box-shadow: 0 0 10px var(--timeline-interval-color);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .timeline-wrapper {
    max-width: 100%;
    padding: 0 15px;
    margin: 40px auto 30px;
  }

  .timeline {
    height: 100px;
  }

  :root {
    --timeline-pulse-size: 10px;
    --timeline-pulse-number-size: 2rem;
    --timeline-interval-number-size: 2rem;
  }
}

@media (max-width: 480px) {
  :root {
    --timeline-pulse-size: 8px;
    --timeline-pulse-number-size: 1.6rem;
    --timeline-interval-number-size: 1.6rem;
  }
}

/* ========== UTILITY CLASSES ========== */
/* Para posicionar números encima/debajo dinámicamente */
.timeline .pulse-number.above {
  top: 10% !important;
}

.timeline .pulse-number.below {
  top: 90% !important;
}

.timeline .interval-number.above {
  top: 0% !important;
}

.timeline .interval-number.below {
  top: 100% !important;
}