/* =====================================================================
 * datalyse-player.css (2026-10-26) — dUI.Player: el reproductor único del CRM (datalyse-player.js + player-video.js), estilo
 * ElevenLabs UI: tarjeta (card), barra (bar), botón suelto (mini) con su reproductor flotante (dock), lista de pistas (list) y
 * vídeo (video). Se enlaza DESPUÉS de datalyse-recording.css (que sigue cargada: la raíz conserva las clases legacy drec drec--card
 * y el adaptador datalyse-recording.js sigue pintando .drec-tx/.drec-out/.drec-line en el hueco .dpl-slot) y le gana por orden
 * y por ámbito. Líneas de 1 px, SIN sombras, CTA en tinta, tiempos tabulares, claro y oscuro solo por los tokens --dt-*
 * (datalyse-modern.css, sección 01). Las clases, los estados is-... y las variables --p, --buf y --vol son el contrato con el JS:
 * aquí no se inventa ninguna. Los únicos colores fijos son los rgba blanco y negro del cristal del vídeo (siempre oscuro) y los
 * fallbacks de los tokens, para que la hoja valga también en el iframe del webphone (sin datalyse-modern.css).
 * Secciones: 00 tokens y base · 01 botones · 02 cabecera · 03 onda · 04 scrub · 05 fila de controles · 06 card · 07 bar ·
 * 08 mini · 09 list · 10 dock · 11 video · 12 estados · 13 transcripción en .dpl-slot · 14 WhatsApp · 15 estrecho ·
 * 16 puntero grueso · 17 menos movimiento · 18 impresión
 * ===================================================================== */

/* ───────── 00 · Tokens y base ─────────
   Los tokens van también en .dpl-dock: el botón de cerrar del reproductor flotante (data-dpl-dock="close") es hijo directo del
   dock, fuera de la raíz .dpl de la tarjeta. --dpl-off-alpha lo lee drawPeaks() (datalyse-player.js, colorsFor): el canvas no
   entiende color-mix(), así que pinta las barras apagadas con la tinta y esa opacidad. */
.dpl, .dpl-dock {
  --dpl-ink: var(--dt-text, #111110);
  --dpl-mute: var(--dt-muted, #5f5f5c);
  --dpl-faint: var(--dt-faint, #72726e);
  --dpl-line: var(--dt-border, rgba(15, 15, 15, .08));
  --dpl-line2: var(--dt-border-strong, rgba(15, 15, 15, .18));
  --dpl-bg: var(--dt-surface, #ffffff);
  --dpl-bg2: var(--dt-surface-2, #eeeeec);
  --dpl-hover: var(--dt-hover, #f4f4f3);
  --dpl-active: var(--dt-active, #efefee);
  --dpl-off: color-mix(in srgb, var(--dpl-ink) 18%, transparent);
  --dpl-off-alpha: .18;
  --dpl-on: var(--dpl-ink);
  --dpl-cta: var(--dt-cta, #111110);
  --dpl-cta-hover: var(--dt-cta-hover, var(--dpl-cta));
  --dpl-cta-fg: var(--dt-cta-fg, #ffffff);
  --dpl-focus: var(--dt-focus, var(--dpl-ink));
  --dpl-danger: var(--dt-danger, #d94949);
  --dpl-r-sm: var(--dt-radius-sm, 6px);
  --dpl-r: var(--dt-radius, 8px);
  --dpl-r-lg: var(--dt-radius-lg, 12px);
  --dpl-d1: var(--dt-dur-1, 110ms);
  --dpl-d: var(--dt-dur-2, 180ms);
  --dpl-d3: var(--dt-dur-3, 220ms);
  --dpl-ease: var(--dt-ease, cubic-bezier(.4, 0, .2, 1));
  --dpl-e: var(--dt-ease-out, cubic-bezier(.2, .8, .2, 1));
  box-sizing: border-box;
  font: 500 13px/1.35 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0; text-transform: none; text-align: left; color: var(--dpl-ink);
  box-shadow: none; /* gana a .drec--card si el adaptador conserva la clase antigua (legacyClass) */
}
.dpl { --p: 0; --buf: 0; --vol: 1; position: relative; }
/* en oscuro las barras apagadas necesitan algo más de presencia sobre --dt-surface */
[data-bs-theme="dark"] .dpl, [data-bs-theme="dark"] .dpl-dock { --dpl-off: color-mix(in srgb, var(--dpl-ink) 24%, transparent); --dpl-off-alpha: .24; }

.dpl *, .dpl *::before, .dpl *::after, .dpl-dock *, .dpl-dock *::before, .dpl-dock *::after { box-sizing: border-box; }
.dpl i:not(.ti) { font-style: normal; }
.dpl button, .dpl-dock button { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dpl button:disabled { cursor: default; opacity: .4; }
.dpl button:focus, .dpl-dock button:focus { outline: 0; }
.dpl button:focus-visible, .dpl-dock button:focus-visible, .dpl [role="slider"]:focus-visible, .dpl-track:focus-visible { outline: 2px solid var(--dpl-focus); outline-offset: 2px; }
.dpl svg, .dpl-dock svg { display: block; width: 16px; height: 16px; flex: none; }
.dpl .ti, .dpl-dock .ti { display: block; font-size: 16px; line-height: 1; }
.dpl [hidden] { display: none !important; }

/* ───────── 01 · Botones ─────────
   play: círculo en tinta de 44 px (36 en la barra, 30 en el mini, 56 sobre el vídeo). Play, pause y spinner se alternan por el
   estado del raíz; sirven tanto los dos svg del contrato como un <i class="ti"> por si el JS los usa. Los tokens --dpl-play-*
   los redefine el cristal del vídeo (sección 11), por eso el fondo va por variable y con !important (hay módulos que pintan
   todo botón por id). */
.dpl-play { position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--dpl-play-bg, var(--dpl-cta)) !important; color: var(--dpl-play-fg, var(--dpl-cta-fg)) !important;
  transition: background-color var(--dpl-d1) var(--dpl-ease), transform var(--dpl-d1) var(--dpl-ease), opacity var(--dpl-d) var(--dpl-ease); }
.dpl-play:hover { background: var(--dpl-play-bg-h, var(--dpl-cta-hover)) !important; }
.dpl-play:active { transform: scale(.96); }
.dpl-play > svg { width: 18px; height: 18px; }
/* el motor marca los svg: .dpl-ico-play/.dpl-ico-pause (núcleo) y .dpl-i-play/.dpl-i-pause (vídeo); el orden (play, pause) vale de respaldo */
.dpl-play > svg:first-of-type, .dpl-play > .dpl-ico-play, .dpl-play > .dpl-i-play, .dpl-play > .ti-player-play { margin-left: 2px; } /* óptico: el triángulo pesa a la izquierda */
.dpl-play > .dpl-ico-pause, .dpl-play > .dpl-i-pause { margin-left: 0; }
.dpl-play > .ti { font-size: 18px; }
.dpl-play > svg:nth-of-type(2), .dpl-play > .dpl-ico-pause, .dpl-play > .dpl-i-pause, .dpl-play > .ti-player-pause,
.dpl.is-playing .dpl-play > svg:first-of-type, .dpl.is-playing .dpl-play > .dpl-ico-play, .dpl.is-playing .dpl-play > .dpl-i-play, .dpl.is-playing .dpl-play > .ti-player-play { display: none; }
.dpl.is-playing .dpl-play > svg:nth-of-type(2), .dpl.is-playing .dpl-play > .dpl-ico-pause, .dpl.is-playing .dpl-play > .dpl-i-pause, .dpl.is-playing .dpl-play > .ti-player-pause { display: block; }
/* spinner: anillo de 2 px del color del texto del botón, solo con is-loading */
.dpl-spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dpl-gira .8s linear infinite; }
.dpl.is-loading .dpl-play > svg, .dpl.is-loading .dpl-play > .ti { display: none !important; }
.dpl.is-loading .dpl-play > .dpl-spin { display: block; }
@keyframes dpl-gira { to { transform: rotate(360deg); } }

/* botón fantasma redondo de 32 px (prev, next, mute, descargar, PiP, pantalla completa) */
.dpl-btn { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: transparent !important; color: var(--dpl-mute) !important;
  transition: background-color var(--dpl-d1) var(--dpl-ease), color var(--dpl-d1) var(--dpl-ease); }
.dpl-btn:hover, .dpl-btn[aria-pressed="true"], .dpl-btn[aria-expanded="true"] { background: var(--dpl-hover) !important; color: var(--dpl-ink) !important; }
.dpl-btn:active { background: var(--dpl-active) !important; }
.dpl-btn .ti { font-size: 17px; }

/* chip de velocidad: píldora de 26 px con línea fina, sin relleno */
.dpl-chip { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 40px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--dpl-line2); background: transparent !important; color: var(--dpl-ink) !important;
  font-size: 12px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; letter-spacing: 0; white-space: nowrap;
  transition: background-color var(--dpl-d1) var(--dpl-ease), border-color var(--dpl-d1) var(--dpl-ease); }
.dpl-chip:hover, .dpl-chip[aria-expanded="true"] { background: var(--dpl-hover) !important; border-color: var(--dpl-ink); }

/* ───────── 02 · Cabecera: título + subtítulo ───────── */
.dpl-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dpl-title { display: block; margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--dpl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpl-sub { display: block; font-size: 12px; font-weight: 500; color: var(--dpl-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpl-title:empty, .dpl-sub:empty { display: none; } /* el motor solo pinta .dpl-head cuando hay título o subtítulo */

/* ───────── 03 · Onda (.dpl-wave): el canvas pinta las barras (drawPeaks); aquí solo la caja, el foco y la etiqueta Live ───────── */
.dpl-wave { position: relative; flex: 1 1 auto; width: 100%; min-width: 80px; height: 56px; border-radius: var(--dpl-r); cursor: pointer; touch-action: none;
  user-select: none; -webkit-user-select: none; outline-offset: 2px; transition: background-color var(--dpl-d1) var(--dpl-ease); }
.dpl-wave:hover { background: color-mix(in srgb, var(--dpl-ink) 3%, transparent); }
.dpl-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
/* ● Live · 128 kbps: píldora sobre la onda, punto en rojo con latido de anillo (sin sombra) */
.dpl-live { position: absolute; left: 8px; top: 50%; z-index: 1; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 999px;
  border: 1px solid var(--dpl-line); background: var(--dpl-bg); color: var(--dpl-ink); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; pointer-events: none; }
.dpl-livedot { position: relative; display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dpl-danger); }
.dpl-livedot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--dpl-danger); opacity: 0; animation: dpl-latido 1.6s var(--dpl-ease) infinite; }
@keyframes dpl-latido { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(1.3); opacity: 0; } }
/* en directo no hay a dónde ir: fuera scrub, velocidad, anterior, siguiente y descargar */
.dpl.is-live .dpl-scrub, .dpl.is-live [data-dpl="rate"], .dpl.is-live [data-dpl="prev"], .dpl.is-live [data-dpl="next"], .dpl.is-live [data-dpl="dl"] { display: none; }

/* ───────── 04 · Scrub (.dpl-scrub): 16 px de alto, pista de 4 px, relleno = --p, búfer = --buf, pulgar de 12 px al pasar ───────── */
.dpl-scrub { position: relative; flex: 1 1 auto; width: 100%; height: 16px; border-radius: 999px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: 0; }
.dpl-scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: var(--dpl-off); }
.dpl-scrub > i { position: absolute; left: 0; top: 50%; height: 4px; max-width: 100%; margin-top: -2px; border-radius: 999px; pointer-events: none; }
.dpl-scrub > .dpl-buf { width: calc(var(--buf, 0) * 100%); background: color-mix(in srgb, var(--dpl-ink) 12%, transparent); }
.dpl-scrub > .dpl-fill { width: calc(var(--p, 0) * 100%); background: var(--dpl-on); }
.dpl-scrub > .dpl-thumb { left: calc(var(--p, 0) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--dpl-on); border: 2px solid var(--dpl-bg);
  transform: scale(0); transition: transform var(--dpl-d1) var(--dpl-ease); }
.dpl-scrub:hover > .dpl-thumb, .dpl-scrub:focus-visible > .dpl-thumb, .dpl.is-seeking .dpl-scrub > .dpl-thumb { transform: scale(1); }
/* globo con el tiempo bajo el cursor: el JS escribe el texto y, si quiere, style.left; sin texto no existe */
.dpl-tip { position: absolute; bottom: calc(100% + 2px); left: calc(var(--p, 0) * 100%); transform: translateX(-50%); padding: 2px 6px; border-radius: var(--dpl-r-sm);
  border: 1px solid var(--dpl-line); background: var(--dpl-bg); color: var(--dpl-ink); font-size: 11px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--dpl-d1) var(--dpl-ease); }
.dpl-tip:empty { display: none; }
.dpl-scrub:hover > .dpl-tip, .dpl.is-seeking .dpl-scrub > .dpl-tip { opacity: 1; }
.dpl-wave + .dpl-scrub { margin-top: -6px; } /* pegado a la onda */

/* ───────── 05 · Fila de controles: tiempo · (prev play next) centrados · volumen · velocidad · descargar ───────── */
.dpl-row { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; }
.dpl-time { flex: none; display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dpl-mute); white-space: nowrap; }
.dpl-time .dpl-now { font-weight: 600; color: var(--dpl-ink); }
.dpl-time .dpl-of::before { content: "/"; margin-right: 4px; color: var(--dpl-faint); }
.dpl-time .dpl-of:empty { display: none; }
.dpl-ctl { display: inline-flex; align-items: center; gap: 4px; margin-inline: auto; }
/* volumen: botón + barra de 72 px + porcentaje */
.dpl-vol { display: inline-flex; align-items: center; gap: 2px; }
.dpl-volbar { position: relative; flex: none; width: 72px; height: 16px; border-radius: 999px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.dpl-volbar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: var(--dpl-off); }
.dpl-volbar > i { position: absolute; left: 0; top: 50%; max-width: 100%; pointer-events: none; }
.dpl-volbar > .dpl-fill { width: calc(var(--vol, 1) * 100%); height: 4px; margin-top: -2px; border-radius: 999px; background: var(--dpl-on); }
.dpl-volbar > .dpl-thumb { left: calc(var(--vol, 1) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--dpl-on); border: 2px solid var(--dpl-bg);
  transform: scale(0); transition: transform var(--dpl-d1) var(--dpl-ease); }
.dpl-vol:hover .dpl-volbar > .dpl-thumb, .dpl-volbar:focus-visible > .dpl-thumb { transform: scale(1); }
.dpl-volpct { flex: none; min-width: 34px; font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dpl-mute); text-align: right; }
.dpl.is-muted .dpl-volbar > .dpl-fill, .dpl.is-muted .dpl-volbar > .dpl-thumb, .dpl.is-muted .dpl-volpct { opacity: .45; }

/* ───────── 06 · Tarjeta (.dpl--card): cabecera, onda, scrub, fila y hueco libre (.dpl-slot) ───────── */
.dpl--card { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 640px; padding: 14px 16px; border: 1px solid var(--dpl-line); border-radius: var(--dpl-r-lg); background: var(--dpl-bg); }
.dpl--card.is-playing { border-color: var(--dpl-line2); }
.dpl-slot { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dpl-slot:empty { display: none; }

/* ───────── 07 · Barra (.dpl--bar): una línea = play 36 · onda o scrub · tiempo · velocidad · descargar ───────── */
.dpl--bar { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--dpl-line); border-radius: var(--dpl-r-lg); background: var(--dpl-bg); }
.dpl--bar.is-playing { border-color: var(--dpl-line2); }
.dpl--bar .dpl-play { width: 36px; height: 36px; }
.dpl--bar .dpl-play > svg { width: 16px; height: 16px; }
.dpl--bar .dpl-play > .ti { font-size: 16px; }
.dpl--bar .dpl-wave { height: 32px; min-width: 80px; }
.dpl--bar .dpl-scrub { min-width: 80px; }
.dpl--bar .dpl-wave + .dpl-scrub { margin-top: 0; }
/* con opts.slot la barra lleva el hueco debajo, a todo el ancho */
.dpl--bar:has(> .dpl-slot) { flex-wrap: wrap; }
.dpl--bar > .dpl-slot { flex: 1 0 100%; order: 9; }

/* ───────── 08 · Mini (.dpl--mini): solo el botón; suena en el dock. Activo = anillo de contorno (sin sombra) ───────── */
.dpl--mini { display: inline-flex; vertical-align: middle; line-height: 0; }
.dpl--mini .dpl-play { width: 30px; height: 30px; }
.dpl--mini .dpl-play > svg { width: 14px; height: 14px; }
.dpl--mini .dpl-play > .ti { font-size: 15px; }
.dpl--mini .dpl-spin { width: 13px; height: 13px; }
.dpl--mini.is-active .dpl-play { outline: 2px solid color-mix(in srgb, var(--dpl-ink) 22%, transparent); outline-offset: 2px; }
.dpl--mini.is-active .dpl-play:focus-visible { outline-color: var(--dpl-focus); }

/* ───────── 09 · Lista (.dpl--list): pistas con índice (o ecualizador al sonar) y pie con la tarjeta o el estado vacío ───────── */
.dpl--list { display: flex; flex-direction: column; width: 100%; max-width: 640px; border: 1px solid var(--dpl-line); border-radius: var(--dpl-r-lg); background: var(--dpl-bg); overflow: hidden; }
.dpl-tracks { list-style: none; margin: 0; padding: 6px 0; max-height: 336px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-bottom: 1px solid var(--dpl-line); }
.dpl-tracks:last-child { border-bottom: 0; }
.dpl-track { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n title dur" "n sub dur"; column-gap: 10px; align-items: center; min-height: 44px; padding: 6px 14px 6px 12px;
  list-style: none; cursor: pointer; color: var(--dpl-mute); transition: background-color var(--dpl-d1) var(--dpl-ease); }
.dpl-track:hover { background: var(--dpl-hover); }
.dpl-track:focus-visible { outline-offset: -2px; }
.dpl-track.is-active, .dpl-track[aria-current] { color: var(--dpl-ink); background: color-mix(in srgb, var(--dpl-ink) 4%, transparent); }
.dpl-track.is-active:hover, .dpl-track[aria-current]:hover { background: var(--dpl-hover); }
.dpl-track-n { grid-area: n; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 16px; line-height: 16px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dpl-faint); }
.dpl-track.is-active .dpl-track-n, .dpl-track[aria-current] .dpl-track-n { color: var(--dpl-ink); }
.dpl-track-title { grid-area: title; min-width: 0; font-size: 13px; font-weight: 500; color: var(--dpl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpl-track.is-active .dpl-track-title, .dpl-track[aria-current] .dpl-track-title { font-weight: 600; }
.dpl-track-sub { grid-area: sub; min-width: 0; font-size: 11.5px; color: var(--dpl-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpl-track-sub:empty { display: none; }
.dpl-track-dur { grid-area: dur; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--dpl-mute); }
/* ecualizador: tres barras que respiran mientras suena (scaleY, sin layout); quietas y bajas en pausa */
.dpl-eq { display: block; width: 3px; height: 14px; border-radius: 2px; background: var(--dpl-ink); transform: scaleY(.3); transform-origin: 50% 100%; animation: dpl-eq .9s var(--dpl-ease) infinite alternate; }
.dpl-eq:nth-child(2) { animation-delay: -.3s; }
.dpl-eq:nth-child(3) { animation-delay: -.6s; }
.dpl:not(.is-playing) .dpl-eq { animation-play-state: paused; }
@keyframes dpl-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
/* pie: div.dpl-foot (footInner del motor) con las piezas de la tarjeta de la pista elegida o el estado vacío */
.dpl-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 14px; }
/* sin pista elegida: "No track selected" a la izquierda y "–:––" a la derecha (van en span.dpl-title y b.dpl-now: aquí, apagados) */
.dpl-empty { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 2px; color: var(--dpl-faint); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dpl-empty .dpl-title, .dpl-empty .dpl-time, .dpl-empty .dpl-time .dpl-now { color: inherit; font-size: inherit; font-weight: 500; }

/* ───────── 10 · Dock (#dplDock.dpl-dock): abajo centrado, z 1045. El motor lo crea con button.dpl-btn.dpl-close[data-dpl-dock=close]
   y div.dpl-dockcard (la tarjeta, sin borde propio); los tokens --dpl-* los hereda del propio dock (sección 00) ───────── */
.dpl-dock { --dpl-bg: var(--dt-overlay, #ffffff); position: fixed; left: 50%; bottom: 18px; z-index: 1045; width: min(640px, calc(100vw - 24px)); transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  border: 1px solid var(--dpl-line2); border-radius: var(--dpl-r-lg); background: var(--dpl-bg); box-shadow: none;
  transition: transform var(--dpl-d3) var(--dpl-e), opacity var(--dpl-d) var(--dpl-ease); }
.dpl-dock.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.dpl-dock:empty { display: none; }
.dpl-dock .dpl--card { border: 0; border-radius: inherit; max-width: none; background: transparent; padding: 12px 16px 14px; }
.dpl-dock .dpl--card .dpl-wave { height: 44px; }
.dpl-dock > .dpl-close, .dpl-dock > [data-dpl-dock="close"] { position: absolute; top: 8px; right: 8px; z-index: 1; }
.dpl-dock .dpl-head { padding-right: 40px; } /* sitio para la X */
/* con la columna de Dalia abierta el topbar cede --dalia-dock-w (dalia.css): el dock se centra en lo que queda */
body.dalia-docked .dpl-dock { left: calc(50% - var(--dalia-dock-w, 0px) / 2); }
@media (max-width: 640px) { body.dalia-docked .dpl-dock { left: 50%; } }

/* ───────── 11 · Vídeo (.dpl--video): envuelve al <video>; capa de clic, play grande en pausa, píldora de sonido y barra de
   cristal oscuro de 44 px (siempre oscura: redefine los tokens --dpl-* en blanco, así los botones, el scrub y el volumen
   compartidos no necesitan reglas propias). ───────── */
.dpl--video { position: relative; display: block; width: 100%; max-width: 100%; overflow: hidden; border-radius: var(--dpl-r-lg); background: #000; line-height: 0; isolation: isolate; outline-offset: 2px; }
.dpl--video > video { display: block; width: 100%; height: auto; max-height: inherit; background: #000; }
.dpl--video:focus-visible { outline: 2px solid var(--dpl-focus); }
.dpl--video.is-idle { cursor: none; }
.dpl--video.is-idle .dpl-vbar, .dpl--video.is-idle .dpl-unmute { opacity: 0; transform: translateY(6px); pointer-events: none; }
/* capa de clic: toda la superficie; el play de 56 px solo en pausa, cargando o con error */
.dpl-vhit { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent !important; color: #fff; cursor: pointer; }
.dpl-vhit .dpl-play { --dpl-play-bg: rgba(12, 12, 12, .72); --dpl-play-bg-h: rgba(12, 12, 12, .86); --dpl-play-fg: #ffffff;
  width: 56px; height: 56px; border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity var(--dpl-d) var(--dpl-ease), transform var(--dpl-d) var(--dpl-e), background-color var(--dpl-d1) var(--dpl-ease); }
.dpl-vhit .dpl-play > svg { width: 22px; height: 22px; }
.dpl-vhit .dpl-play > .ti { font-size: 24px; }
.dpl-vhit .dpl-spin { width: 20px; height: 20px; }
.dpl--video.is-playing:not(.is-loading):not(.is-error) .dpl-vhit .dpl-play { opacity: 0; transform: scale(.9); pointer-events: none; }
/* "Activar sonido": píldora arriba a la izquierda (opts.unmuteCta); el JS la muestra y la oculta con [hidden] */
.dpl-unmute { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18) !important; background: rgba(12, 12, 12, .72) !important; color: #fff !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1; white-space: nowrap;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity var(--dpl-d) var(--dpl-ease), transform var(--dpl-d) var(--dpl-e), background-color var(--dpl-d1) var(--dpl-ease); }
.dpl-unmute:hover { background: rgba(12, 12, 12, .86) !important; }
.dpl-unmute .ti { font-size: 16px; }
/* barra inferior */
.dpl-vbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 6px; line-height: 1.35; color: #fff;
  --dpl-ink: #ffffff; --dpl-on: #ffffff; --dpl-mute: rgba(255, 255, 255, .78); --dpl-faint: rgba(255, 255, 255, .6);
  --dpl-off: rgba(255, 255, 255, .28); --dpl-line: rgba(255, 255, 255, .16); --dpl-line2: rgba(255, 255, 255, .3);
  --dpl-bg: rgba(12, 12, 12, .9); --dpl-bg2: rgba(255, 255, 255, .12); --dpl-hover: rgba(255, 255, 255, .14); --dpl-active: rgba(255, 255, 255, .2); --dpl-focus: #ffffff;
  --dpl-play-bg: transparent; --dpl-play-bg-h: rgba(255, 255, 255, .14); --dpl-play-fg: #ffffff;
  background: rgba(12, 12, 12, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity var(--dpl-d) var(--dpl-ease), transform var(--dpl-d) var(--dpl-e); }
.dpl-vbar .dpl-play { width: 32px; height: 32px; }
.dpl-vbar .dpl-play > svg { width: 18px; height: 18px; }
.dpl-vbar .dpl-time { padding: 0 2px; font-size: 12px; }
.dpl-vbar .dpl-scrub { flex: 1 1 auto; min-width: 60px; }
.dpl-vbar .dpl-scrub > .dpl-thumb, .dpl-vbar .dpl-volbar > .dpl-thumb { border-color: transparent; }
.dpl-vbar .dpl-tip { bottom: calc(100% + 8px); }
/* volumen plegado: la barra se despliega al pasar por el botón (o con foco dentro); el porcentaje no cabe */
.dpl-vbar .dpl-volbar { width: 0; opacity: 0; overflow: hidden; transition: width var(--dpl-d) var(--dpl-e), opacity var(--dpl-d1) var(--dpl-ease); }
.dpl-vbar .dpl-vol:hover .dpl-volbar, .dpl-vbar .dpl-vol:focus-within .dpl-volbar { width: 64px; opacity: 1; overflow: visible; }
.dpl-vbar .dpl-volpct { display: none; }
/* pantalla completa: el envoltorio llena la pantalla y el vídeo se ajusta sin recortar. El motor pone is-fs en la raíz y, si
   opts.fullscreenEl es otro nodo, .dpl-fs-host en ese nodo (lo que entra en pantalla completa): ahí la raíz se centra sobre negro.
   Las pseudoclases van en reglas separadas (un selector desconocido invalida la regla entera). */
.dpl--video.is-fs { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; }
.dpl--video.is-fs > video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.dpl--video:fullscreen { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; }
.dpl--video:fullscreen > video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.dpl--video:-webkit-full-screen { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; }
.dpl--video:-webkit-full-screen > video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.dpl-fs-host { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; background: #000; overflow: hidden; }
.dpl-fs-host .dpl--video { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; }
.dpl-fs-host .dpl--video > video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
/* imagen en imagen: el vídeo sigue en su ventana flotante; aquí queda el marco y la barra (el motor marca is-pip) */
.dpl--video.is-pip > video { opacity: .35; }

/* ───────── 12 · Estados comunes ───────── */
.dpl.is-error:not(.dpl--list), .dpl--list.is-error > .dpl-foot { opacity: .6; } /* en la lista solo se apaga el pie: las pistas siguen elegibles */
.dpl.is-error .dpl-wave, .dpl.is-error .dpl-scrub { cursor: default; pointer-events: none; }
.dpl.is-loading .dpl-wave, .dpl.is-loading .dpl-scrub { cursor: progress; }
/* is-pending (adaptador datalyse-recording.js, «Procesando grabación») no lleva regla propia: la raíz la conserva hasta el primer clic
   después de la hora, así que lo que se ve es solo el velo .drec-pend de la sección 13 */
.dpl.is-seeking .dpl-scrub > .dpl-thumb, .dpl.is-seeking .dpl-tip { transition: none; }
.dpl.is-seeking, .dpl.is-seeking * { user-select: none; -webkit-user-select: none; }

/* ───────── 13 · Transcripción dentro de .dpl-slot (adaptador datalyse-recording.js: .drec-tx, .drec-out, .drec-txbox, .drec-line
   y sus hijos). Acotado a .dpl-slot para ganar a las reglas de datalyse-recording.css si siguiera cargada. ───────── */
.dpl-slot .drec-tx { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid var(--dpl-line2); background: transparent !important; color: var(--dpl-ink) !important; font-size: 12.5px !important; font-weight: 600 !important; white-space: nowrap;
  transition: background-color var(--dpl-d1) var(--dpl-ease), border-color var(--dpl-d1) var(--dpl-ease); }
.dpl-slot .drec-tx:hover, .dpl-slot .drec-tx[aria-expanded="true"] { background: var(--dpl-hover) !important; border-color: var(--dpl-ink); }
.dpl-slot .drec-tx svg { width: 15px; height: 15px; }
.dpl-slot .drec-tx .ti { font-size: 15px; }
.dpl-slot .drec-tx span { display: inline; } /* datalyse-recording.css lo esconde a ≤560: aquí la etiqueta cabe */
.dpl-slot .drec-out { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dpl-slot .drec-out:empty { display: none; }
/* estado de la transcripción (cargando, error) */
.dpl-slot .drec-st { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: var(--dpl-r); border: 1px solid var(--dpl-line); background: transparent; color: var(--dpl-mute); font-size: 12.5px; font-weight: 500; }
.dpl-slot .drec-st .drec-spin { display: block; width: 13px; height: 13px; }
.dpl-slot .drec-spin { border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dpl-gira .8s linear infinite; }
.dpl-slot .drec-st.is-err { color: var(--dpl-danger); border-color: color-mix(in srgb, var(--dpl-danger) 40%, transparent); }
/* «Procesando grabación…»: velo que el adaptador cuelga de .dpl-wave (o de .dpl-scrub si no hay onda) con animation-delay en línea
   (pendingUntil); al cumplirse se desvanece solo */
.dpl-wave .drec-pend, .dpl-scrub .drec-pend { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: inherit;
  background: color-mix(in srgb, var(--dpl-bg) 82%, transparent); color: var(--dpl-mute); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; pointer-events: none;
  animation: dpl-pendfuera .3s var(--dpl-ease) forwards; animation-delay: 7s; }
.dpl-scrub .drec-pend { font-size: 11px; }
.dpl-wave .drec-pend .drec-spin, .dpl-scrub .drec-pend .drec-spin { display: block; flex: none; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dpl-gira .8s linear infinite; }
@keyframes dpl-pendfuera { to { opacity: 0; visibility: hidden; } }
/* caja de la transcripción: línea superior, barra con idioma y copiar, frases con tiempo y la que suena resaltada */
.dpl-slot .drec-txbox { min-width: 0; border-top: 1px solid var(--dpl-line); padding-top: 10px; }
.dpl-slot .drec-txbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dpl-faint); }
.dpl-slot .drec-icon { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: transparent !important; color: var(--dpl-mute) !important;
  transition: background-color var(--dpl-d1) var(--dpl-ease), color var(--dpl-d1) var(--dpl-ease); }
.dpl-slot .drec-icon:hover { background: var(--dpl-hover) !important; color: var(--dpl-ink) !important; }
.dpl-slot .drec-icon svg { width: 15px; height: 15px; }
.dpl-slot .drec-lines { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dpl-slot .drec-line { display: flex; gap: 10px; width: 100%; min-width: 0; padding: 5px 8px; border-radius: var(--dpl-r-sm); background: transparent !important; color: inherit; text-align: left;
  font-size: 13.5px !important; font-weight: 500; line-height: 1.45; transition: background-color var(--dpl-d1) var(--dpl-ease); }
.dpl-slot .drec-line:hover { background: var(--dpl-hover) !important; }
.dpl-slot .drec-line .drec-ts { flex: none; min-width: 34px; padding-top: 1px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--dpl-mute); }
.dpl-slot .drec-line .drec-lt { min-width: 0; overflow-wrap: anywhere; color: color-mix(in srgb, var(--dpl-ink) 82%, transparent); }
.dpl-slot .drec-line.is-now { background: color-mix(in srgb, var(--dpl-ink) 7%, transparent) !important; }
.dpl-slot .drec-line.is-now .drec-lt { color: var(--dpl-ink); font-weight: 600; }
.dpl-slot .drec-who { margin-right: 2px; font-weight: 700; color: var(--dpl-ink); }
.dpl-slot .drec-plain { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ───────── 14 · Notas de voz de WhatsApp (.whats-voice): tarjeta compacta dentro de la burbuja ───────── */
.whats-voice { min-width: 0; max-width: 100%; }
.whats-voice .dpl--card, .whats-voice .dpl--bar { width: 380px; min-width: 0; max-width: 100%; }
.whats-voice .dpl--card { gap: 8px; padding: 10px 12px; }
.whats-voice .dpl--card .dpl-wave { height: 40px; }
.whats-voice .dpl-row { flex-wrap: wrap; gap: 6px; min-height: 36px; }
.whats-voice .dpl-play { width: 36px; height: 36px; }
.whats-voice .dpl-play > svg { width: 16px; height: 16px; }
.whats-voice .dpl-play > .ti { font-size: 16px; }
.whats-voice .dpl-volbar, .whats-voice .dpl-volpct { display: none; }
.whats-voice .dpl-slot .drec-tx { max-width: 100%; height: auto; min-height: 30px; padding-top: 4px; padding-bottom: 4px; white-space: normal; }
.whats-voice .dpl-slot .drec-tx span { display: inline; overflow-wrap: anywhere; }
.whats-voice .dpl-slot .drec-lines, .whats-voice .dpl-slot .drec-line { min-width: 0; max-width: 100%; }

/* ───────── 15 · Estrecho (≤ 560 px): la barra pasa a dos líneas, la tarjeta pierde la barra de volumen, el vídeo aprieta ───────── */
@media (max-width: 560px) {
  .dpl--bar { flex-wrap: wrap; row-gap: 8px; }
  .dpl--bar .dpl-wave, .dpl--bar .dpl-scrub { order: 5; flex-basis: 100%; }
  .dpl--card .dpl-row, .dpl-foot .dpl-row, .dpl--list .dpl-row { flex-wrap: wrap; row-gap: 6px; }
  .dpl--card .dpl-volbar, .dpl--card .dpl-volpct, .dpl--list .dpl-volbar, .dpl--list .dpl-volpct { display: none; }
  .dpl-vbar { gap: 4px; padding: 0 6px 0 4px; }
  .dpl-vbar .dpl-vol:hover .dpl-volbar, .dpl-vbar .dpl-vol:focus-within .dpl-volbar { width: 0; opacity: 0; overflow: hidden; }
  .dpl-vbar .dpl-chip { min-width: 34px; padding: 0 6px; }
  .dpl-track { grid-template-columns: 24px minmax(0, 1fr) auto; padding-left: 10px; padding-right: 12px; }
  .whats-voice .dpl-slot .drec-tx { width: 100%; justify-content: center; }
}

/* ───────── 16 · Puntero grueso (táctil): botones de 40, pistas de 24, pulgar siempre a la vista ───────── */
@media (pointer: coarse) {
  .dpl-btn { width: 40px; height: 40px; }
  .dpl-chip { height: 32px; min-width: 44px; }
  .dpl-scrub, .dpl-volbar { height: 24px; }
  .dpl-scrub > .dpl-thumb, .dpl-volbar > .dpl-thumb { transform: scale(1); }
  .dpl-track { min-height: 48px; }
  .dpl-vbar { height: 48px; }
  .dpl-vbar .dpl-volbar, .dpl-vbar .dpl-volpct { display: none; } /* el móvil tiene volumen físico */
  .dpl--video.is-idle { cursor: auto; }
}

/* ───────── 17 · Menos movimiento: nada se anima ni transiciona. El velo «Procesando grabación» se queda fuera del apagón: su
   animación es un temporizador (animation-delay en línea = pendingUntil) y sin ella no desaparecería nunca; se corta en 1 ms ───────── */
@media (prefers-reduced-motion: reduce) {
  .dpl, .dpl *:not(.drec-pend), .dpl *::before, .dpl *::after, .dpl-dock, .dpl-dock * { transition: none !important; animation: none !important; }
  .dpl .drec-pend { transition: none !important; animation-duration: 1ms !important; animation-timing-function: linear !important; }
  .dpl-eq { transform: scaleY(.6); }
}

/* ───────── 18 · Impresión: solo título, onda y tiempos; fuera botones, dock y vídeo flotante ───────── */
@media print {
  .dpl-dock, .dpl-ctl, .dpl-vol, .dpl-chip, .dpl-btn, .dpl-play, .dpl-vbar, .dpl-vhit, .dpl-unmute, .dpl-tip, .dpl-scrub > .dpl-thumb, .dpl--mini, .dpl-slot .drec-tx, .dpl-slot .drec-icon { display: none !important; }
  .dpl--card, .dpl--bar, .dpl--list { break-inside: avoid; }
  .dpl-row { min-height: 0; }
}