/* App10: Línea Sonora - Estilos */

/* ========== IFRAME COMPATIBILITY ========== */
/* Només reset de marges - NO canviem l'estructura flex del template */
html, body {
  margin: 0;
  padding: 0;
}

/* ========== CSS VARIABLES ========== */
:root {
  --line-color: #666;
  --soundline-width: 3px;
  --note-highlight-color: #7CD6B3;

  /* Soundline sizing and positioning (matching App14) */
  --soundline-height: 100%;
  --soundline-offset-x: 35px;
  --timeline-offset-y: -30px;
}

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

/* ========== START OVERLAY (from App6) ========== */
.start-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 100;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 35vh; /* Alinear con la soundline */
  font-size: 1.5rem;
  color: var(--line-color);
  opacity: 0.3;
  transition: opacity 0.3s ease;
  pointer-events: auto;
}

.start-overlay:hover {
  opacity: 0.6;
}

.start-overlay.hidden {
  display: none;
}

/* ========== TWO-COLUMN LAYOUT CUSTOMIZATION ========== */
/* Controls se insertan directamente (patrón App14, sin wrapper) */

/* ========== SOUNDLINE WRAPPER ========== */
.timeline-wrapper {
  width: 100%;
  max-width: 600px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  padding: 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Soundline container (como App14) */
.soundline-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Timeline element (contains soundline) */
.timeline {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center; /* Centrar soundline */
  align-items: center;
  overflow: visible; /* Allow soundline to extend beyond 100% */
  transform: translateY(var(--timeline-offset-y, 0px)); /* Ajust fi vertical */
}

/* Ocultar la línea horizontal del timeline (no necesaria en App10) */
.timeline::before {
  display: none !important;
}

/* ========== SOUNDLINE (VERTICAL LINE) ========== */
.soundline {
  position: relative;
  width: 300px; /* Más ancho para acomodar números a la izquierda */
  height: var(--soundline-height, 100%); /* Altura ajustable con variable */
  margin: 0 auto;
  transform: translateX(var(--soundline-offset-x, 0px)); /* Ajust fi horitzontal */
}

/* Línea vertical principal */
.soundline::before {
  content: '';
  position: absolute;
  left: 100px; /* Posicionada a 100px del borde izquierdo del soundline */
  top: var(--line-top, 0);
  bottom: var(--line-bottom, 0);
  width: var(--soundline-width);
  background: var(--line-color);
  pointer-events: none;
  z-index: 1;
}

/* ========== DIVISIONES HORIZONTALES ========== */
.soundline-division {
  position: absolute;
  width: 30px; /* Líneas cortas que cruzan la línea vertical */
  height: 2px;
  background: var(--line-color);
  left: 85px; /* Empiezan 15px antes de la línea vertical */
  pointer-events: none;
  z-index: 2;
}

/* ========== NÚMEROS (0-11) ========== */
.soundline-number {
  position: absolute;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text-color, #333);
  user-select: none;
  z-index: 3;
  opacity: 0.85;
  transition: color 0.3s ease;
  left: 40px; /* Posicionados a la izquierda de la línea */
  text-align: right;
  width: 40px;
}

[data-theme="dark"] .soundline-number {
  color: var(--text-dark, #e0e0e0);
}

/* ========== NOTE HIGHLIGHTS ========== */
.note-highlight {
  --note-highlight-color: #7CD6B3;
  position: absolute;
  width: 80px;
  height: 8.33%;
  left: 120px; /* A la derecha de la línea vertical (100px + 20px) */
  background: var(--note-highlight-color);
  opacity: 0;
  border-radius: 4px;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-highlight[data-note="1"],
.note-highlight[data-note="3"],
.note-highlight[data-note="5"],
.note-highlight[data-note="7"],
.note-highlight[data-note="9"],
.note-highlight[data-note="11"] {
  --note-highlight-color: #F5C6C2;
}

.note-highlight.highlight {
  opacity: 0.8;
  box-shadow: 0 0 14px var(--note-highlight-color), 0 0 20px currentColor;
  animation: noteFlash var(--pulse-anim-duration, 0.35s) ease-out;
}

.note-highlight-label {
  color: white;
  font-size: 1.4rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.note-highlight.highlight .note-highlight-label {
  opacity: 1;
}

@keyframes noteFlash {
  0% {
    transform: translateY(-50%) scale(0.95);
    opacity: 0;
  }
  50% {
    transform: translateY(-50%) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.8;
  }
}

/* ========== CONTROLES ========== */
/* Estilos de botón Play heredados de shared-ui/.play */

/* ========== MOSTRAR SOLO BOTÓN PLAY ========== */
/* App10 solo necesita el botón Play */
.controls #tapTempoBtn,
.controls #loopBtn,
.controls #randomBtn,
.controls #resetBtn,
.controls .random,
.controls .loop,
.controls .tap,
.controls .reset,
.controls #randomMenu,
.controls #mixerMenu {
  display: none !important;
}

/* Asegurar que Play sea visible */
.controls #playBtn,
.controls .play,
.controls .play-group {
  display: flex !important;
}

/* Posicionamiento de .controls (patrón App14) */
.controls {
  position: relative;
  top: -300px;
  left: -200px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: -50px;
  width: auto;
  height: auto;
}

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

  .soundline {
    width: 150px;
  }

  .soundline-number {
    font-size: 1.4rem;
  }

  .note-highlight {
    width: 60px;
  }

  .note-highlight-label {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .timeline-wrapper {
    height: 350px;
    padding: 20px 15px;
  }

  .soundline {
    width: 120px;
  }

  .soundline-number {
    font-size: 1.2rem;
  }

  .note-highlight {
    width: 50px;
  }

  .note-highlight-label {
    font-size: 1rem;
  }
}