/* Click · reproductor premium estilo podcast / audiolibro */
.story-tts{
  --tts-accent:#7a4cff;
  --tts-accent-2:#9c74ff;
  --tts-card:#171325;
  --tts-card-2:#211936;
  --tts-line:rgba(255,255,255,.10);
  --tts-muted:#b9b0cb;
  --tts-track:rgba(255,255,255,.13);
  margin:24px 0 32px;
  padding:20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:
    radial-gradient(circle at 88% -8%,rgba(122,76,255,.30),transparent 36%),
    radial-gradient(circle at -10% 110%,rgba(157,115,255,.16),transparent 34%),
    linear-gradient(145deg,var(--tts-card-2),var(--tts-card) 52%,#14101f);
  box-shadow:0 24px 60px rgba(12,7,26,.28),inset 0 1px 0 rgba(255,255,255,.04);
  color:#fff;
  overflow:hidden;
  position:relative;
}
.story-tts:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.035),transparent 28% 72%,rgba(255,255,255,.02));}
.story-tts *{box-sizing:border-box}
.story-tts button,.story-tts select,.story-tts input{font:inherit}
.story-tts-head{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:center;position:relative;z-index:1}
.story-tts-art{width:104px;height:104px;border-radius:22px;overflow:hidden;background:linear-gradient(145deg,#302052,#7a4cff);box-shadow:0 16px 34px rgba(0,0,0,.28);position:relative;isolation:isolate}
.story-tts-art:before{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.12);border-radius:inherit;z-index:2;pointer-events:none}
.story-tts-art img{width:100%;height:100%;object-fit:cover;display:block}
.story-tts-art:after{content:'▶';position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(12,8,22,.82);color:#fff;font-size:10px;padding-left:2px;backdrop-filter:blur(8px);box-shadow:0 5px 16px rgba(0,0,0,.28);z-index:3}
.story-tts-copy{min-width:0}
.story-tts-kicker{display:flex;align-items:center;gap:8px;margin:0 0 7px;color:#bda8ff;font-size:10px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.story-tts-kicker:before{content:'';width:8px;height:8px;border-radius:50%;background:#7cffb0;box-shadow:0 0 0 5px rgba(124,255,176,.10)}
.story-tts-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:21px;line-height:1.18;font-weight:950;color:#fff;letter-spacing:-.015em}
.story-tts-author{display:block;margin-top:7px;color:#bdb5cc;font-size:12px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-tts-progress{margin-top:22px;position:relative;z-index:1}
.story-tts-seek-wrap{height:28px;display:flex;align-items:center}
.story-tts-seeker{width:100%;height:7px;margin:0;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;outline:none;cursor:pointer;background:linear-gradient(90deg,#8d61ff 0,#8d61ff var(--tts-progress,0%),var(--tts-track) var(--tts-progress,0%),var(--tts-track) 100%)}
.story-tts-seeker::-webkit-slider-runnable-track{height:7px;border-radius:999px;background:transparent}
.story-tts-seeker::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:5px solid #7a4cff;box-shadow:0 3px 12px rgba(0,0,0,.28);margin-top:-6.5px}
.story-tts-seeker::-moz-range-track{height:7px;border:0;border-radius:999px;background:transparent}
.story-tts-seeker::-moz-range-progress{height:7px;border-radius:999px;background:#8d61ff}
.story-tts-seeker::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#fff;border:5px solid #7a4cff;box-shadow:0 3px 12px rgba(0,0,0,.28)}
.story-tts-time-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:1px;color:#aaa1bc;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.story-tts-duration{white-space:nowrap}
.story-tts-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;position:relative;z-index:1}
.story-tts-skip,.story-tts-play,.story-tts-stop{border:0;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease,background .16s ease,border-color .16s ease}
.story-tts-skip{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.08);color:#fff;font-size:12px;font-weight:950;line-height:1.03;text-align:center;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.story-tts-skip:hover{transform:translateY(-1px) scale(1.02);background:rgba(255,255,255,.11)}
.story-tts-play{min-width:164px;height:60px;border-radius:999px;padding:0 24px;background:linear-gradient(135deg,#7144f5,#9b70ff);color:#fff;font-size:14px;font-weight:950;box-shadow:0 13px 28px rgba(113,68,245,.30),inset 0 1px 0 rgba(255,255,255,.14)}
.story-tts-play:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(113,68,245,.38),inset 0 1px 0 rgba(255,255,255,.14)}
.story-tts-play.is-speaking{background:linear-gradient(135deg,#6337e8,#8f63ff)}
.story-tts-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid var(--tts-line);position:relative;z-index:1}
.story-tts-status{min-width:0;color:#c2b9d2;font-size:12px;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-tts-tools{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.story-tts-stop{height:38px;border-radius:999px;padding:0 13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:#d7d0df;font-size:11px;font-weight:850}
.story-tts-stop:hover{background:rgba(255,255,255,.08)}
.story-tts-speed{display:flex;align-items:center;gap:7px;color:#bdb5cc;font-size:11px;font-weight:800}
.story-tts-speed select{height:38px;border-radius:999px;padding:0 30px 0 12px;border:1px solid rgba(255,255,255,.10);background:#211a31;color:#fff;font-weight:900;outline:none;box-shadow:none}
.story-tts button:disabled{opacity:.34;cursor:not-allowed;transform:none;box-shadow:none}
.story-tts-note{display:none}
.story-tts.is-speaking .story-tts-art:after{content:'Ⅱ';font-size:11px;padding-left:0}
.story-tts.is-speaking .story-tts-kicker:before{animation:storyTtsPulse 1.25s ease-in-out infinite}
.story-tts.is-unsupported .story-tts-controls,.story-tts.is-unsupported .story-tts-progress{opacity:.5}
@keyframes storyTtsPulse{50%{box-shadow:0 0 0 10px rgba(124,255,176,0)}}

/* El aspecto es intencionalmente idéntico con voz del navegador o audio real. */
.story-tts.is-background-mode{border-color:rgba(255,255,255,.08)}
.story-tts.is-background-mode .story-tts-kicker{color:#bda8ff}
.story-tts.is-background-mode .story-tts-kicker:before{background:#7cffb0;box-shadow:0 0 0 5px rgba(124,255,176,.10)}

/* Compatibilidad con elementos antiguos del modo segundo plano: no se muestran al lector. */
.story-tts-background-wrap,.story-tts-background,.story-tts-background-hint{display:none!important}

@media(max-width:720px){
  .story-tts{margin:18px 0 26px;padding:16px;border-radius:24px}
  .story-tts-head{grid-template-columns:78px minmax(0,1fr);gap:13px}
  .story-tts-art{width:78px;height:78px;border-radius:17px}
  .story-tts-art:after{width:25px;height:25px;right:5px;bottom:5px;font-size:9px}
  .story-tts-kicker{font-size:9px;letter-spacing:.13em;margin-bottom:5px}
  .story-tts-title{font-size:17px;line-height:1.2}
  .story-tts-author{font-size:11px;margin-top:5px}
  .story-tts-progress{margin-top:18px}
  .story-tts-controls{gap:10px;margin-top:12px}
  .story-tts-skip{width:46px;height:46px;font-size:11px;flex:0 0 46px}
  .story-tts-play{min-width:0;flex:0 1 150px;height:54px;padding:0 15px;font-size:13px}
  .story-tts-bottom{align-items:flex-start;gap:10px;flex-wrap:wrap;margin-top:15px;padding-top:13px}
  .story-tts-status{width:100%;white-space:normal;line-height:1.35}
  .story-tts-tools{width:100%;justify-content:space-between}
  .story-tts-stop{flex:1;max-width:150px}
  .story-tts-speed{margin-left:auto}
}
@media(max-width:420px){
  .story-tts{padding:14px;border-radius:21px}
  .story-tts-head{grid-template-columns:68px minmax(0,1fr);gap:11px}
  .story-tts-art{width:68px;height:68px;border-radius:15px}
  .story-tts-title{font-size:15.5px}
  .story-tts-controls{gap:8px}
  .story-tts-skip{width:43px;height:43px;flex-basis:43px}
  .story-tts-play{height:51px;flex-basis:132px;padding:0 11px;font-size:12.5px}
  .story-tts-speed span{display:none}
  .story-tts-speed select{min-width:74px}
}
@media(max-width:350px){
  .story-tts-head{grid-template-columns:60px minmax(0,1fr)}
  .story-tts-art{width:60px;height:60px}
  .story-tts-controls{gap:6px}
  .story-tts-skip{width:40px;height:40px;flex-basis:40px}
  .story-tts-play{flex-basis:118px;height:49px;font-size:12px}
}


/* Puntos Click · desbloqueo de audio y descarga */
.story-tts-download{height:38px;border-radius:999px;padding:0 13px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.07);color:#fff;font-size:11px;font-weight:900;cursor:pointer;transition:.16s ease}
.story-tts-download:hover{background:rgba(138,82,255,.22);border-color:rgba(166,121,255,.35);transform:translateY(-1px)}
.story-tts-download.hidden{display:none!important}
html.click-points-modal-open{overflow:hidden}
.click-points-modal{position:fixed;inset:0;z-index:7000;display:grid;place-items:center;padding:18px;background:rgba(10,7,22,.58);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.click-points-modal-card{position:relative;width:min(430px,100%);padding:26px 24px 22px;border:1px solid rgba(139,87,235,.20);border-radius:26px;background:#fff;color:#221b31;box-shadow:0 28px 80px rgba(18,9,39,.30);text-align:center}
.click-points-modal-x{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#f4effd;color:#6145a0;font-size:21px;cursor:pointer}
.click-points-modal-icon{width:58px;height:58px;margin:0 auto 12px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,#efe7ff,#f8f5ff);color:#7a43e8;font-size:25px;box-shadow:inset 0 0 0 1px #e3d6fb}
.click-points-modal-card h3{margin:0;font-size:22px;line-height:1.15;color:#241a38}
.click-points-modal-body{margin-top:11px;color:#71677f;font-size:14px;line-height:1.52}
.click-points-modal-body p{margin:5px 0}.click-points-modal-body b{color:#5f31bb}
.click-points-modal-balance{margin:15px 0 18px;padding:10px 12px;border-radius:14px;background:#f6f1ff;color:#77678f;font-size:12px}.click-points-modal-balance strong{color:#592cac;font-size:15px}
.click-points-modal-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:9px}
.click-points-modal-actions button{min-height:46px;border:0;border-radius:14px;padding:0 14px;font-weight:900;cursor:pointer}
.click-points-modal-secondary{background:#f1edf7;color:#6f6380}.click-points-modal-primary{background:linear-gradient(135deg,#7440ee,#9e5cff);color:#fff;box-shadow:0 10px 22px rgba(116,64,238,.24)}
.click-points-modal-actions button:disabled{opacity:.6;cursor:wait}
html[data-theme="dark"] .click-points-modal-card{background:#1b1628;color:#fff;border-color:rgba(169,119,255,.24)}
html[data-theme="dark"] .click-points-modal-x{background:#2a213d;color:#d5c5ef}html[data-theme="dark"] .click-points-modal-card h3{color:#fff}html[data-theme="dark"] .click-points-modal-body{color:#c7bdd5}html[data-theme="dark"] .click-points-modal-balance{background:#251d38;color:#c8bdd8}html[data-theme="dark"] .click-points-modal-balance strong{color:#c09aff}html[data-theme="dark"] .click-points-modal-secondary{background:#2a223b;color:#ddd2ee}
@media(max-width:720px){
  .story-tts-tools{gap:7px}.story-tts-download{flex:1;min-width:0;padding:0 10px}.story-tts-stop{flex:0 1 105px}
  .click-points-modal{align-items:end;padding:12px}.click-points-modal-card{width:100%;border-radius:26px 26px 20px 20px;padding:24px 18px 18px}.click-points-modal-actions{grid-template-columns:1fr}.click-points-modal-primary{grid-row:1}.click-points-modal-secondary{grid-row:2}.click-points-modal-card h3{font-size:20px}
}

/* ===== Story TTS v2 · gratis por defecto + prueba de segundo plano ===== */
.story-tts{margin:18px 0 0}
.story-tts-modebar{display:grid;gap:9px;margin-top:14px;position:relative;z-index:1}
.story-tts-mode{min-height:48px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-weight:900;padding:0 16px;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.story-tts-mode:hover{transform:translateY(-1px);background:rgba(255,255,255,.10)}
.story-tts-background-hint{display:block;color:#cfc5e3;font-size:12px;line-height:1.45}
.story-tts-note{display:block;margin:12px 0 0;color:#bdb5cc;font-size:12px;line-height:1.45}
.story-tts.is-free-mode .story-tts-play{background:linear-gradient(135deg,#445fdd,#7c91ff)}
.story-tts.is-free-mode .story-tts-mode{background:rgba(122,76,255,.18);border-color:rgba(166,121,255,.35)}
.story-tts.is-background-mode .story-tts-play{background:linear-gradient(135deg,#7144f5,#9b70ff)}
.story-tts.is-background-mode .story-tts-mode{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.story-tts.is-free-mode .story-tts-kicker:before{background:#73f2d1;box-shadow:0 0 0 5px rgba(115,242,209,.10)}
.story-tts.is-background-mode .story-tts-kicker:before{background:#ffdc7d;box-shadow:0 0 0 5px rgba(255,220,125,.10)}
@media(max-width:720px){
  .story-tts-mode{min-height:46px;font-size:13px;padding:0 13px}
  .story-tts-background-hint,.story-tts-note{font-size:11.5px}
}

/* MP3 de pago: control visible y táctil en el diseño aprobado */
.story-tts-browser{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 14px;border:1px solid rgba(168,130,255,.35);border-radius:13px;background:rgba(132,81,255,.18);color:#f4efff;font:inherit;font-size:12px;font-weight:800;line-height:1.25;text-align:center;cursor:pointer;white-space:normal}
.story-tts-browser:hover,.story-tts-browser:focus-visible{background:rgba(132,81,255,.30);border-color:rgba(188,162,255,.65)}
.story-tts-browser[hidden]{display:none!important}
@media(max-width:720px){.story-tts-bottom .story-tts-tools{flex-wrap:wrap;gap:8px}.story-tts-browser{flex:1 1 165px;min-width:0;min-height:46px}.story-tts-bottom .story-tts-stop,.story-tts-bottom .story-tts-download{min-height:44px}}

/* Archivo real, descargado por una pulsación del usuario en Safari/Android. */
.click-points-modal-body .click-mobile-direct-download{display:flex;align-items:center;justify-content:center;min-height:52px;margin:17px 0 5px;padding:12px 18px;border-radius:14px;background:#7435e8;color:#fff!important;text-decoration:none;font-size:15px;font-weight:900;text-align:center;line-height:1.3;box-shadow:none}
.click-points-modal-body .click-mobile-direct-download:focus-visible{outline:3px solid #beabff;outline-offset:3px}
.click-points-modal-body .click-mobile-direct-download:hover{background:#642dd6}

/* Modalidad pública exclusiva: la elegida por el autor al publicar. */
.story-tts-free-only .story-tts-download,
.story-tts-free-only [data-story-tts-background],
.story-tts-paid-only [data-story-tts-background],
.story-tts [hidden]{display:none!important}
.story-tts-free-only .story-tts-play{background:linear-gradient(135deg,#415ecb,#6789ea);color:#fff}
.story-tts-paid-only .story-tts-play{background:linear-gradient(135deg,#6d38dc,#9259f5);color:#fff}
.story-tts-paid-only .story-tts-kicker{color:#d7baff}
.story-tts-paid-only .story-tts-kicker:before{background:#e5c0ff;box-shadow:0 0 0 5px rgba(225,192,255,.10)}
.story-tts-free-only .story-tts-pricing{display:none!important}