/* App13: Intervalos Temporales - Estilos específicos de la app */

/* ========== IFRAME COMPATIBILITY ========== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ========== VARIABLES DE COLOR ========== */
:root {
  --timeline-interval-color: #F28AAD;
  --timeline-pulse-color: currentColor;
  --timeline-line-color: #666;

  /* Ajust fi dels controls */
  --controls-offset-x: 0px;
  --controls-offset-y: -20px;
  --controls-scale: 1;
}

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

/* ========== BPM INPUT ========== */
.inputs {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.inputs .bpm-inline {
  position: relative;
}

/* ========== EDITOR iT ========== */
.it-editor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto 30px;
  gap: 10px;
}

.it-editor-label,
.it-editor__label {
  color: #F28AAD;
  font-weight: 700;
  font-size: 2.8rem;
  margin-right: 8px;
}

.it-editor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.it-input {
  width: 48px;
  height: 48px;
  border: 2px solid var(--border-color, #ccc);
  border-radius: 8px;
  background: var(--bg-input, transparent);
  color: var(--text-color, currentColor);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: all 0.2s ease;
  -moz-appearance: textfield;
}

.it-input::-webkit-outer-spin-button,
.it-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.it-input:focus {
  border-color: var(--selection-color, #FFBB33);
  box-shadow: 0 0 0 3px rgba(255, 187, 51, 0.2);
}

.it-input::placeholder {
  color: var(--text-muted, #888);
  font-weight: 400;
  font-size: 0.9rem;
}

.it-input.has-value {
  border-color: var(--selection-color, #FFBB33);
  background: rgba(255, 187, 51, 0.1);
}

/* ========== SUM DISPLAY (readonly) ========== */
.it-sum-display {
  border-color: var(--border-color, #ccc);
  color: var(--text-muted, #888);
  cursor: default;
  pointer-events: none;
  margin-left: 24px;
  position: relative;
}

.it-sum-display::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 32px;
  background: var(--border-color, #ccc);
  border-radius: 1px;
}

.it-sum-display:focus {
  border-color: var(--border-color, #ccc);
  box-shadow: none;
}

/* Longitud completa - blau nuzic */
.it-sum-display.complete {
  border-color: #7BB4CD;
  color: #7BB4CD;
}

.it-sum-display.complete::before {
  background: #7BB4CD;
}

/* ========== TOOLTIP ========== */
.it-tooltip {
  position: fixed;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.it-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.it-tooltip.success {
  background: #7BB4CD;
  color: white;
}

.it-tooltip.error {
  background: #EF4444;
  color: white;
}

.it-tooltip.info {
  background: #7BB4CD;
  color: white;
}

/* ========== TIMELINE ========== */
.timeline-wrapper {
  max-width: 700px;
  margin: 30px auto;
  padding: 0 20px;
}

.timeline {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
}

.timeline-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--timeline-line-color);
  transform: translateY(-50%);
}

/* Pulsos del timeline */
.timeline .pulse {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--timeline-pulse-color, currentColor);
  transform: translate(-50%, -50%);
  top: 50%;
  z-index: 10;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Flash dels pulsos durant reproducció */
.timeline .pulse.active {
  transform: translate(-50%, -50%) scale(1.5);
  background: var(--selection-color, #FFBB33);
  box-shadow: 0 0 12px var(--selection-color, #FFBB33);
}

.timeline .pulse-number {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--timeline-interval-color, #4A9EFF);
  top: calc(50% + 25px);
  transform: translateX(-50%);
  user-select: none;
}

/* ========== BARRES D'INTERVALS VISUALS ========== */
.interval-bar-visual {
  position: absolute;
  top: 50%;
  height: 28px;
  border-radius: 6px;
  z-index: 5;
  transform: translateY(-50%);
  transition: box-shadow 0.2s ease;
  pointer-events: none;
}

.interval-bar-visual.highlight {
  box-shadow: 0 0 12px currentColor;
}

/* Número de duració sobre la barra */
.interval-bar-visual .bar-duration {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: 600;
  color: inherit;
  opacity: 0.9;
}

/* ========== CONTROLES ========== */
.controls {
  transform: translate(var(--controls-offset-x), var(--controls-offset-y)) scale(var(--controls-scale));
}

/* Amagar botons innecessaris del template */
.controls #tapTempoBtn,
.controls #loopBtn {
  display: none !important;
}

/* Ordre dels botons: Random primer */
.controls #randomBtn {
  order: -1;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .it-editor-container {
    margin: 15px auto 25px;
  }

  .it-input {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }

  .timeline-wrapper {
    max-width: 100%;
    padding: 0 15px;
    margin: 25px auto;
  }

  .timeline {
    height: 100px;
  }

  .timeline .pulse {
    width: 10px;
    height: 10px;
  }

  .timeline .pulse-number {
    font-size: 1rem;
    top: calc(50% + 20px);
  }

  .interval-bar-visual {
    height: 24px;
  }

  .interval-bar-visual .bar-duration {
    font-size: 1rem;
    top: -20px;
  }
}

@media (max-width: 480px) {
  .it-input {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .timeline .pulse-number {
    font-size: 0.9rem;
  }

  .timeline .pulse {
    width: 8px;
    height: 8px;
  }

  .interval-bar-visual {
    height: 20px;
  }

  .interval-bar-visual .bar-duration {
    font-size: 0.9rem;
    top: -18px;
  }
}