/* LÍNEA DE TIEMPO. Panel compacto y controles táctiles sin altura fija. */
.timeline-panel {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #54607f;
  border-radius: 12px;
  background: linear-gradient(110deg, #28283f, #152c42);
}
.timeline-header,
.timeline-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.timeline-header {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
}
.timeline-heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.timeline-heading strong {
  color: #e6e4ff;
  font-size: 12px;
}
.timeline-selected {
  font-size: 12px;
  color: #d9ecff;
  font-variant-numeric: tabular-nums;
}
.timeline-panel .timeline-button,
.timeline-panel .timeline-span {
  width: auto;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid #586680;
  border-radius: 7px;
  background: #18253b;
  color: #dceaff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.timeline-panel .timeline-button:disabled {
  opacity: 0.4;
  cursor: default;
}
.timeline-panel .timeline-button:hover:not(:disabled),
.timeline-panel .timeline-event:hover {
  background: #334367;
}
.timeline-axis {
  margin: 6px 8px 0;
}
.timeline-marks {
  height: 31px;
  position: relative;
}
.timeline-mark {
  position: absolute;
  transform: translateX(-50%);
  top: 10px;
  font-size: 16px;
  line-height: 19px;
  color: #c8b8ff;
  pointer-events: none;
}
.timeline-mark.is-eclipse {
  top: -3px;
  color: #ffcf91;
}
.timeline-panel .timeline-range {
  display: block;
  width: 100%;
  min-width: 0;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 0;
  accent-color: #c3b2ff;
  cursor: ew-resize;
}
.timeline-ticks {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 1px;
  color: #aebed7;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.timeline-ticks span:nth-child(2) {
  text-align: center;
}
.timeline-ticks span:last-child {
  text-align: right;
}
.timeline-events {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
}
.timeline-panel .timeline-event {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #685b8f;
  border-radius: 7px;
  color: #e3dcfb;
  background: #342d4a;
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.timeline-event small {
  color: #c1bdd5;
  font-size: 10px;
}
.timeline-panel .timeline-event.is-eclipse {
  border-color: #8e7056;
  background: #463a33;
  color: #ffe0b1;
}
.timeline-event-symbol {
  font-size: 14px;
}
.timeline-empty,
.timeline-panel .timeline-note {
  color: #b9c8dc;
  font-size: 10px;
  line-height: 1.5;
}
.timeline-panel .timeline-note {
  margin: 7px 0 0;
}
.timeline-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 500px) {
  .timeline-panel {
    padding: 10px;
  }
  .timeline-tools {
    width: 100%;
    flex-wrap: wrap;
  }
  .timeline-panel .timeline-button,
  .timeline-panel .timeline-span {
    min-height: 36px;
  }
  .timeline-ticks span:nth-child(2) {
    display: none;
  }
}