/* Escuchar la enseñanza: botón del encabezado y reproductor flotante, con el
   mismo vidrio que usa la Biblia. */

.ensenanza-escuchar-caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 1.4rem 0 0.4rem;
}

.ensenanza-escuchar {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid rgba(210, 227, 255, 0.18);
    border-radius: 999px;
    background: rgba(14, 20, 32, 0.52);
    color: #e3f1ff;
    font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(231, 242, 255, 0.10);
    transition: background 150ms ease, border-color 150ms ease;
}

.ensenanza-escuchar svg { width: 18px; height: 18px; }
.ensenanza-escuchar:hover { background: rgba(174, 215, 250, 0.18); }
.ensenanza-escuchar.is-playing { background: rgba(174, 215, 250, 0.22); border-color: rgba(174, 215, 250, 0.45); }

.ensenanza-escuchar-reiniciar {
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #9eacc0;
    font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ensenanza-escuchar-reiniciar:hover { color: #e3f1ff; }
.ensenanza-escuchar-reiniciar[hidden] { display: none; }

html:not(.dark) .ensenanza-escuchar {
    border-color: rgba(0, 0, 0, 0.10);
    background: rgba(255, 255, 255, 0.78);
    color: #1d1d1f;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70);
}

html:not(.dark) .ensenanza-escuchar-reiniciar { color: #6b7280; }

/* El párrafo que suena */
main.esta-leyendo .esta-sonando {
    background: linear-gradient(115deg, rgba(174, 215, 250, 0.20), rgba(174, 215, 250, 0.12));
    box-shadow: -0.55em 0 0 rgba(174, 215, 250, 0.85), 0.35em 0 0 rgba(174, 215, 250, 0.12);
    border-radius: 0.2em;
}

main.esta-leyendo :is(p, li, h2, h3, h4) { cursor: pointer; }

/* Reproductor flotante */
.voz-player {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    z-index: 270;
    width: auto;
    max-width: 440px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.voz-player[hidden] { display: none; }

.voz-player-cara {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(210, 227, 255, 0.16);
    border-radius: 999px;
    background: linear-gradient(150deg, rgba(34, 46, 66, 0.86), rgba(10, 14, 23, 0.92));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(231, 242, 255, 0.10);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
}

.voz-player .voz-boton {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #e3f1ff;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}

.voz-player .voz-boton:hover { background: rgba(174, 215, 250, 0.20); }
.voz-player .voz-boton:active { transform: scale(0.94); }
.voz-player .voz-boton svg { width: 17px; height: 17px; }

.voz-player .voz-boton-grande {
    width: 44px;
    height: 44px;
    background: rgba(174, 215, 250, 0.20);
}

.voz-player .voz-boton-grande svg { width: 19px; height: 19px; }
.voz-player .voz-icono-seguir { display: none; }
.voz-player.esta-en-pausa .voz-icono-pausa { display: none; }
.voz-player.esta-en-pausa .voz-icono-seguir { display: block; }

.voz-player .voz-info {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 6px;
}

.voz-player .voz-referencia {
    color: #eef3fb;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voz-player .voz-ayuda {
    color: #9eacc0;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voz-player .voz-velocidad {
    width: auto;
    min-width: 42px;
    padding: 0 10px;
    border-radius: 999px;
    font: 600 12.5px/1 inherit;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
    .voz-player { left: 8px; right: 8px; }
    .voz-player-cara { gap: 2px; padding: 5px; }
    .voz-player .voz-boton { width: 34px; height: 34px; }
    .voz-player .voz-boton-grande { width: 40px; height: 40px; }
    .voz-player .voz-velocidad { min-width: 38px; padding: 0 7px; font-size: 12px; }
    .voz-player .voz-info { padding: 0 4px; }
    .voz-player .voz-ayuda { display: none; }
}