/* Lector de texto en voz alta. Colores ajustables desde el tema:
   --lector-acento (relleno del botón), --lector-sobre-acento (ícono sobre el relleno),
   --lector-borde, --lector-hover, --lector-resaltado (párrafo que se está leyendo). */
.lector{display:block}
span.lector,span.lector-texto{display:inline}
.lector .lector-barra{position:relative;display:flex;align-items:center;gap:.15rem;width:max-content;max-width:100%;box-sizing:border-box;min-height:40px;margin:0 0 1em;padding:3px;border:1px solid var(--lector-borde,rgba(128,128,128,.35));border-radius:999px;overflow:hidden;font-family:inherit;font-size:.875rem;line-height:1.2;font-weight:500;color:inherit;letter-spacing:normal;text-transform:none}
.lector-en-linea>.lector-barra{display:inline-flex;vertical-align:middle;margin:0 .45em .2em 0}
.lector .lector-barra button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:.55rem;min-height:32px;border-radius:999px;cursor:pointer;color:inherit;font:inherit;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background-color .2s}
.lector .lector-barra button:hover:not(:disabled){background:var(--lector-hover,rgba(128,128,128,.13))}
.lector .lector-barra button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.lector .lector-barra button:disabled{cursor:default}
.lector .lector-barra .lector-play{padding:0 .8rem 0 0;min-width:0;flex:0 1 auto}
.lector .lector-etiqueta{min-width:0;max-width:26em;overflow:hidden;text-overflow:ellipsis}
.lector .lector-barra .lector-vel,.lector .lector-barra .lector-stop,.lector .lector-tiempo{flex:none}
.lector .lector-icono{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--lector-acento,transparent);color:var(--lector-sobre-acento,inherit);box-shadow:inset 0 0 0 1.5px var(--lector-acento,currentColor)}
.lector .lector-barra svg{width:14px;height:14px;fill:currentColor;display:block}
.lector .lector-barra .lector-ico-pausa,.lector .lector-barra .lector-play[aria-pressed="true"] .lector-ico-play{display:none}
.lector .lector-barra .lector-play[aria-pressed="true"] .lector-ico-pausa{display:block}
.lector .lector-tiempo{display:inline-block;min-width:3.3em;opacity:.62;font-weight:400;font-variant-numeric:tabular-nums}
.lector .lector-barra .lector-vel{padding:0 .65rem;opacity:.8;font-variant-numeric:tabular-nums}
.lector .lector-barra .lector-stop{width:32px;justify-content:center}
.lector .lector-barra .lector-stop[hidden]{display:none}
.lector .lector-progreso{position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none}
.lector .lector-progreso>span{display:block;height:100%;background:var(--lector-acento,currentColor);opacity:.55;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s linear}
.lector-no-disponible .lector-barra{opacity:.5}
.lector-leyendo{background-color:var(--lector-resaltado,rgba(250,204,21,.2));box-shadow:0 0 0 .3em var(--lector-resaltado,rgba(250,204,21,.2));border-radius:.25em;transition:background-color .25s,box-shadow .25s}
@media (prefers-reduced-motion:reduce){.lector .lector-progreso>span,.lector-leyendo,.lector .lector-barra button{transition:none}}
@media print{.lector .lector-barra{display:none!important}}