/* Leveragency · Web v2 · componente compartido: reproductor con transcripción sincronizada.
   Todo scopeado bajo .atx. No redefine nada de base.css. */

.atx{background:var(--papel-alto);border:var(--borde);border-radius:var(--r-2);padding:clamp(18px,2.2vw,24px)}
.atx-head{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;margin-bottom:18px}
.atx-titulo{font-family:var(--fm);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin:0}

/* ---------- transporte ---------- */
.atx-player{display:flex;align-items:center;gap:16px}
.atx-play{flex:none;width:56px;height:56px;border-radius:50%;background:var(--tinta);color:var(--papel);
  display:inline-flex;align-items:center;justify-content:center;transition:background .2s var(--ease),transform .2s var(--ease)}
.atx-play:hover{background:var(--tinta-cuerpo)}
.atx-play:active{transform:scale(.96)}
.atx-play svg{width:20px;height:20px}
.atx-play .atx-i-pause{display:none}
.atx.is-play .atx-play .atx-i-play{display:none}
.atx.is-play .atx-play .atx-i-pause{display:block}

.atx-transporte{flex:1 1 auto;min-width:0}
.atx-bar{display:block;width:100%;padding:20px 0;min-height:44px;box-sizing:border-box;border:0;background:none;cursor:pointer;touch-action:manipulation}
.atx-bar-pista{display:block;height:4px;border-radius:2px;background:var(--linea-fuerte);position:relative;overflow:hidden}
.atx-bar-hecho{position:absolute;inset:0 auto 0 0;width:0;background:var(--ambar);border-radius:2px;transition:width .12s linear}
.atx-time{display:block;margin-top:2px;font-family:var(--fm);font-size:var(--fs-mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--gris)}

/* estado sin grabación */
.atx-estado{margin:14px 0 0;font-family:var(--fm);font-size:var(--fs-mono);line-height:1.5;letter-spacing:.04em;color:var(--gris)}
.atx.is-off .atx-play{background:var(--linea-fuerte);color:var(--papel-alto);cursor:default}
.atx.is-off .atx-play:hover{background:var(--linea-fuerte)}
.atx.is-off .atx-bar{cursor:default}
.atx.is-off .atx-bar-hecho{display:none}

/* ---------- transcripción ---------- */
.atx-tr{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:var(--borde);display:grid;gap:2px}
.atx-cue{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 12px;align-items:baseline;
  padding:8px 10px;margin:0 -10px;border-radius:var(--r-1);border-left:2px solid transparent;transition:background .2s var(--ease)}
.atx-quien{font-family:var(--fm);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);padding-top:3px}
.atx-cue--agente .atx-quien{color:var(--tinta)}
.atx-txt{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--tinta-cuerpo)}
.atx-cue.is-on{background:var(--ambar-wash);border-left-color:var(--ambar)}
.atx-cue.is-on .atx-txt{color:var(--tinta)}
.atx-nota{margin-top:16px}

@media (max-width:520px){
  .atx-cue{grid-template-columns:1fr;gap:2px}
  .atx-quien{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .atx-bar-hecho,.atx-cue,.atx-play{transition:none}
}