/* ============================================================================
   Anime Studio - anim.css  (área A: animación)
   Panel de transformación, diálogo de suavizado, controles añadidos a la línea
   de tiempo, hoja de exposición y lista de marcadores. Ningún color literal
   salvo los acentos propios de la animación (claves amarillas, como en el resto
   del programa): todo sale de tokens.css.
   ========================================================================== */

/* --- Panel flotante de transformación ----------------------------------- */
.ax-panel {
  position: fixed;
  z-index: var(--z-overlay, 200);
  width: 300px;
  max-width: calc(100vw - 16px);
  display: flex;
  flex-direction: column;
  background: var(--s-2);
  color: var(--fg);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  font-size: var(--fs-sm);
  user-select: none;
  -webkit-user-select: none;
}
.ax-panel[hidden] { display: none; }

.ax-panel-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--bd);
  cursor: move;
  touch-action: none;
}
.ax-panel-title { font-weight: var(--fw-semibold); }
.ax-panel-sub {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--fg-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ax-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  max-height: 70vh;
  overflow-y: auto;
}

.ax-tf-grid {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 92px 18px;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.ax-tf-label {
  color: var(--fg-dim);
  cursor: ew-resize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ax-tf-label:hover { color: var(--fg); }
.ax-tf-input { width: 100%; min-width: 0; text-align: right; }
.ax-tf-unit { color: var(--fg-mute); font-size: var(--fs-xs); }
.ax-tf-line { display: flex; align-items: center; gap: var(--sp-3); }
.ax-tf-line > .ax-tf-label { flex: 0 0 auto; cursor: default; }
.ax-tf-select { flex: 1 1 auto; min-width: 0; }
.ax-tf-actions, .ax-tf-toggles { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ax-check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; color: var(--fg-dim); }
.ax-check input { margin: 0; }

/* El rombo de clave: vacío = sin animar, contorno = animado, relleno = clave aquí. */
.ax-key-btn {
  width: 14px;
  height: 14px;
  margin: 0 auto;
  padding: 0;
  border: 1.5px solid var(--fg-mute);
  background: transparent;
  transform: rotate(45deg);
  border-radius: 2px;
  cursor: pointer;
}
.ax-key-btn.is-anim { border-color: #ffd25a; }
.ax-key-btn.is-key { border-color: #ffd25a; background: #ffd25a; }
.ax-key-btn:hover:not(:disabled) { box-shadow: 0 0 0 3px var(--accent-soft); }
.ax-key-btn:disabled { opacity: 0.35; cursor: default; }

body.ax-scrubbing, body.ax-scrubbing * { cursor: ew-resize !important; user-select: none; }

/* --- Diálogo de suavizado --------------------------------------------------- */
.ax-ease {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
}
.ax-ease-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  max-height: 360px;
  overflow-y: auto;
  align-content: start;
}
.ax-ease-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  background: var(--s-1);
  color: var(--fg-dim);
  text-align: left;
  cursor: pointer;
  font-size: var(--fs-sm);
}
.ax-ease-item:hover { background: var(--s-3); color: var(--fg); }
.ax-ease-item.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.ax-ease-mini { width: 44px; height: 30px; flex: 0 0 auto; }
.ax-ease-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-ease-side { display: flex; flex-direction: column; gap: var(--sp-3); align-items: stretch; }
.ax-ease-title { font-weight: var(--fw-semibold); }
.ax-ease-canvas {
  width: 260px;
  height: 260px;
  background: var(--s-1);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  touch-action: none;
  cursor: crosshair;
}
.ax-ease-presets { display: flex; flex-wrap: wrap; gap: var(--sp-1); max-width: 260px; }
.ax-ease-presets[hidden], .ax-ease-nums[hidden], .ax-ease-steps[hidden] { display: none; }
.ax-ease-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); max-width: 260px; }
.ax-ease-numlbl { display: flex; flex-direction: column; gap: 2px; color: var(--fg-mute); font-size: var(--fs-xs); }
.ax-ease-num { width: 100%; min-width: 0; }
.ax-ease-steps { display: flex; align-items: center; gap: var(--sp-3); color: var(--fg-dim); }
.ax-ease-steps .ax-ease-num { width: 72px; }
.ax-ease-prevwrap { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-2); }
.ax-ease-preview { width: 100%; height: 64px; background: var(--s-1); border: 1px solid var(--bd); border-radius: var(--r-md); }
.ax-ease-hint, .ax-hint { margin: 0; color: var(--fg-mute); font-size: var(--fs-xs); }

@media (max-width: 720px) {
  .ax-ease { grid-template-columns: minmax(0, 1fr); }
  .ax-ease-canvas { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* --- Campos de los diálogos propios ---------------------------------------- */
.ax-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-2) 0;
  color: var(--fg-dim);
}
.ax-field .input { width: 100%; }
.ax-color { padding: 0; height: 28px; }

/* --- Línea de tiempo: controles añadidos ------------------------------------- */
.ax-tl-group { display: flex; align-items: center; gap: var(--sp-1); flex: 0 0 auto; }
.ax-tl-btn.is-active { color: var(--accent-fg); background: var(--accent); }
.ax-rec .ax-glyph { color: var(--fg-mute); }
.ax-rec.is-active { background: transparent; }
.ax-rec.is-active .ax-glyph { color: var(--err); text-shadow: 0 0 6px var(--err); }
.ax-glyph {
  display: inline-block;
  min-width: 14px;
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
}
.ax-pb-group { display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-5); }
.ax-tl-select { height: 24px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-xs); max-width: 96px; }

/* --- Hoja de exposición ---------------------------------------------------- */
.ax-xsheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--s-1);
}
.ax-xsheet[hidden] { display: none; }
.ax-xs-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; }
.ax-xs-content { position: relative; }
.ax-xs-canvas { position: absolute; left: 0; top: 0; will-change: transform; cursor: pointer; }
.ax-xs-edit { position: absolute; z-index: 2; box-sizing: border-box; }
#timeline.is-xsheet #timeline-ruler { display: none; }

/* --- Marcadores y escenas -------------------------------------------------- */
.ax-mk-list { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 60vh; overflow-y: auto; }
.ax-mk-h { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); color: var(--fg-dim); font-weight: var(--fw-semibold); }
.ax-mk-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--s-1);
}
.ax-mk-dot { width: 10px; height: 10px; border-radius: var(--r-full); flex: 0 0 auto; }
.ax-mk-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-mk-frame { color: var(--fg-mute); font-size: var(--fs-xs); }

@media (pointer: coarse) {
  .ax-key-btn { width: 18px; height: 18px; }
  .ax-tf-grid { grid-template-columns: 26px minmax(0, 1fr) 96px 18px; }
}