/* Capricho skin for Able Player 5 (audio). Load after vendor/ableplayer/ableplayer.min.css.
   Scope: an element with class "cap-player" wrapping the Able Player host and the transcript div.
   Uses the app's own look (app.css): white card, #E1E4E7 borders, #147FAF actions, #242424 text,
   3px #147FAF focus ring, sizes scaled by the app's --k text-size factor.
   Contrast on white: #242424 15.9:1, #4f5559 7.4:1, #0f6a93 6.1:1, #147FAF 4.6:1 (icons/large only). */

.cap-player {
  --cp-text: #242424;
  --cp-muted: #4f5559;
  --cp-line: #E1E4E7;
  --cp-soft: #F1F3F4;
  --cp-blue: #147FAF;
  --cp-blue-dark: #0f6a93;
  --cp-tint: #E8F3F8;
  --cp-k: var(--k, 1);
  background: #fff;
  color: var(--cp-text);
  border: 1px solid var(--cp-line);
  border-radius: 16px;
  padding: 14px 14px 6px;
  font-family: inherit;
}
.cap-player .cp-head { margin: 0 0 2px; }
.cap-player .cp-title { margin: 0; font-size: calc(15px * var(--cp-k)); font-weight: 700; }
.cap-player .cp-sub { margin: 2px 0 0; font-size: calc(13px * var(--cp-k)); color: var(--cp-muted); }

/* ---------- Able Player variables ---------- */
.cap-player .able-wrapper,
.cap-player .able-transcript-area {
  --able-controller-background: transparent;
  --able-control-color: var(--cp-text);
  --able-statusbar-background: transparent;
  --able-statusbar-color: var(--cp-muted);
  --able-seekbar-border: transparent;
  --able-seekbar-background: var(--cp-line);
  --able-seekbar-loaded: #D3D7DB;
  --able-seekbar-played: var(--cp-blue);
  --able-seekbar-head: var(--cp-blue);
  --able-focus-outline: var(--cp-blue);
  --able-hover-outline: transparent;
  --able-menu-background: #fff;
  --able-menu-color: var(--cp-text);
  --able-menu-border: var(--cp-line);
  --able-menu-outline: transparent;
  --able-menu-focus-background: var(--cp-blue);
  --able-menu-focus-color: #fff;
  --able-volume-background: #fff;
  --able-volume-outline: var(--cp-line);
  --able-tooltip-background: var(--cp-text);
  --able-tooltip-color: #fff;
  --able-tooltip-border: var(--cp-text);
  --able-transcript-background: transparent;
  --able-cue-highlighted-background: var(--cp-tint);
  --able-cue-highlighted-color: var(--cp-text);
  --able-cue-interacting-background: var(--cp-soft);
  --able-cue-interacting-color: var(--cp-text);
  --able-default-caption-background: transparent;
  --able-default-caption-color: var(--cp-text);
  font-family: inherit;
}
.cap-player .able-wrapper { background: transparent; }

/* ---------- Layout: seek bar, then times, then controls ---------- */
.cap-player .able-player { display: flex; flex-direction: column; position: relative; }
.cap-player .able-controller { display: contents; }
.cap-player .able-seekbar-wrapper { order: 1; padding: 12px 7px 6px; }
.cap-player .able-status-bar { order: 2; display: flex; padding: 0; font-size: calc(12px * var(--cp-k)); font-variant-numeric: tabular-nums; position: relative; }
.cap-player .able-control-row { order: 3; }
.cap-player .ableplayer-clear { display: none; }

/* Seek bar: thin rounded track; the 14px head keeps a 24px hit area via Able's min sizes on hover/focus. */
.cap-player .able-seekbar { height: 6px; border: none; border-radius: 3px; }
.cap-player .able-seekbar-loaded,
.cap-player .able-seekbar-played { border-radius: 3px; }
.cap-player .able-seekbar-head {
  min-width: 16px; min-height: 16px; width: 16px; height: 16px; margin-left: -8px;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* Times: elapsed left, duration right, speed (when not 1x it matters) centred. */
.cap-player .able-timer { display: flex; justify-content: space-between; flex: 1; }
.cap-player .able-timer-separator,
.cap-player .able-status { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; } /* still read */
.cap-player .able-speed { position: absolute; left: 50%; transform: translateX(-50%); }

/* Controls: transport centred, secondary buttons in a quiet row below. */
.cap-player .able-control-row { flex-direction: column; gap: 2px; padding: 6px 0 2px; }
.cap-player .able-left-controls { justify-content: center; gap: 10px; width: 100%; }
.cap-player .able-right-controls {
  justify-content: space-between; width: 100%; gap: 2px; padding: 6px 0 0; margin-top: 6px;
  border-top: 1px solid var(--cp-line);
}
.cap-player .able-pipe { display: none; }

.cap-player .able-controller div[role=button] {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border-radius: 50%; padding: 10px; color: var(--cp-text);
  transition: background-color .12s;
}
.cap-player .able-right-controls div[role=button] { color: var(--cp-muted); padding: 11px; }
.cap-player .able-controller div[role=button]:hover { background: var(--cp-soft); color: var(--cp-text); }
.cap-player .able-controller div[role=button] svg { width: 100%; height: 100%; }

/* Play: the app's round blue action button. */
.cap-player .able-controller div.able-button-handler-play[role=button] {
  width: 56px; height: 56px; min-width: 56px; min-height: 56px;
  padding: 16px; background: var(--cp-blue); color: #fff; margin: 0 4px;
}
.cap-player .able-controller div.able-button-handler-play[role=button]:hover { background: var(--cp-blue-dark); color: #fff; }

/* Toggles: off is dimmer, on gets a small blue bar under the icon (shape, not colour alone). */
.cap-player .able-controller .buttonOff { opacity: .5; }
.cap-player .able-right-controls div.able-button-handler-captions:not(.buttonOff)::after,
.cap-player .able-right-controls div.able-button-handler-transcript:not(.buttonOff)::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; width: 14px; height: 3px; margin-left: -7px;
  border-radius: 2px; background: var(--cp-blue);
}

/* Focus: same ring as the rest of the app. */
.cap-player .able-controller div[role=button]:focus-visible,
.cap-player .able-seekbar-head:focus-visible,
.cap-player .able-window-toolbar input:focus-visible,
.cap-player .able-window-toolbar select:focus-visible,
.cap-player .able-transcript span.able-transcript-seekpoint:focus-visible {
  outline: 3px solid var(--cp-blue); outline-offset: 2px;
}

/* Menus, volume slider, tooltips. */
.cap-player ul.able-popup { border: 1px solid var(--cp-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 6px; opacity: 1; }
.cap-player .able-popup li { border-radius: 8px; padding: 8px 12px; }
.cap-player .able-volume-slider { border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); bottom: 48px; }
.cap-player .able-tooltip { border-radius: 6px; font-size: 12px; }

/* Caption line (when Subtítulos is on): the current sentence, large, under the controls. */
.cap-player .able .able-audcap-container { padding: 6px 0 0; min-height: 0; }
.cap-player div.able-captions-wrapper { text-align: start; }
.cap-player .able-captions { font-size: calc(17px * var(--cp-k)) !important; font-weight: 600; background: transparent !important; color: var(--cp-text) !important; }

/* ---------- Transcript ---------- */
.cap-player .able-transcript-area { border: none; padding: 0 0 8px; position: static !important; width: 100% !important; }
.cap-player .able-window-toolbar {
  background: transparent; color: var(--cp-muted); padding: 10px 2px 4px; margin-top: 6px;
  border-top: 1px solid var(--cp-line); font-size: calc(13px * var(--cp-k));
  flex-wrap: wrap; gap: 6px 16px; justify-content: flex-start;
}
.cap-player .able-window-toolbar > div { display: flex; align-items: center; min-width: 0; }
.cap-player .able-window-toolbar label { color: var(--cp-muted); }
.cap-player .able-window-toolbar input[type=checkbox] { accent-color: var(--cp-blue); width: 18px; height: 18px; vertical-align: middle; margin-inline-start: 6px; }
.cap-player .able-window-toolbar select {
  background: #fff; color: var(--cp-text); border: 1px solid var(--cp-line); border-radius: 8px;
  padding: 4px 8px; margin-inline-start: 6px; font: inherit;
}
.cap-player .able-transcript {
  background: transparent; height: auto; max-height: calc(280px * var(--cp-k)); padding: 0; margin: 0 -8px;
  scrollbar-width: thin; scrollbar-color: #C9CED3 transparent;
}
.cap-player .able-transcript div { margin: 4px 0 8px; }
.cap-player .able-transcript-block br { display: none; }
.cap-player .able-transcript span.able-transcript-seekpoint {
  display: block; margin: 0 0 2px; padding: 6px 8px; border-radius: 10px;
  font-size: var(--fs, calc(17px * var(--cp-k))); line-height: 1.45; color: var(--cp-text);
  border: none; cursor: pointer;
  transition: background-color .15s;
}
.cap-player .able-transcript span.able-transcript-seekpoint:hover { background: var(--cp-soft); border-bottom: none; }
/* Current line: tinted background and bold (the weight change marks it without relying on colour). */
.cap-player .able-transcript span.able-highlight,
.cap-player .able-transcript span.able-highlight:hover,
.cap-player .able-transcript span.able-highlight:focus {
  background: var(--cp-tint) !important; color: var(--cp-text) !important;
  font-weight: 700; padding: 6px 8px;
}

/* ---------- Full-screen view (js/audio-player.js): the transcript takes the space below the controls ---------- */
.aud-player { width: 100%; max-width: 560px; display: flex; flex-direction: column; min-height: 0; border: none; padding: 0; }
.aud-player .ab-host { flex: none; }
.aud-player .ab-tr { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.aud-player .able-transcript-area { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.aud-player .able-transcript { flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; }
.aud-player .able-transcript span.able-transcript-seekpoint { font-size: calc(19px * var(--cp-k)); }
.dys .aud-player .able-transcript span.able-transcript-seekpoint { font-family: "OpenDyslexic", "Helvetica Neue", Arial, sans-serif; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .cap-player * { transition: none !important; }
}
@media (forced-colors: active) {
  .cap-player { border-color: CanvasText; }
  /* High-contrast modes drop backgrounds: use the system highlight colours for the current line. */
  .cap-player .able-transcript span.able-highlight { forced-color-adjust: none; background: Highlight !important; color: HighlightText !important; }
}