/* Botao Ouvir, The Abel Times / peepnews.com.br. Usa os tokens do site (--fundo, --texto, --apoio, --fio). */
:root{--ouvir-fundo:#a3442e;--ouvir-texto:#f6f1e7;--ouvir-foco:var(--texto,#11213a);--ouvir-seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2311213a' stroke-width='2'/%3E%3C/svg%3E")}
:root[data-tema="escuro"]{--ouvir-fundo:#d9b25f;--ouvir-texto:#0c1829;--ouvir-foco:var(--texto,#efe8d8);--ouvir-seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23efe8d8' stroke-width='2'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){--ouvir-fundo:#d9b25f;--ouvir-texto:#0c1829;--ouvir-foco:var(--texto,#efe8d8);--ouvir-seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23efe8d8' stroke-width='2'/%3E%3C/svg%3E")}}
.ouvir{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 24px;font-family:"Libre Franklin",Inter,system-ui,sans-serif}
.ouvir[hidden]{display:none}
.ouvir__botao,.ouvir__parar,.ouvir__voz{min-height:44px;border-radius:8px;font:inherit;font-size:16px;line-height:1;cursor:pointer}
.ouvir__botao{display:inline-flex;align-items:center;gap:8px;padding:0 18px 0 14px;border:2px solid var(--ouvir-fundo);background:var(--ouvir-fundo);color:var(--ouvir-texto);font-weight:700;letter-spacing:.02em;transition:background-color .24s,color .24s}
.ouvir__botao svg{width:22px;height:22px;flex:none}
.ouvir__botao:hover{background:transparent;color:var(--texto)}
.ouvir__parar{display:inline-flex;align-items:center;justify-content:center;width:44px;padding:0;border:2px solid var(--apoio);background:transparent;color:var(--texto)}
.ouvir__parar svg{width:16px;height:16px}
.ouvir__parar[hidden]{display:none}
.ouvir__voz{max-width:100%;padding:0 36px 0 12px;border:2px solid var(--apoio);background:var(--fundo) var(--ouvir-seta) no-repeat right 12px center/12px 8px;color:var(--texto);-webkit-appearance:none;appearance:none}
.ouvir__rotulo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ouvir__botao:focus-visible,.ouvir__parar:focus-visible,.ouvir__voz:focus-visible{outline:2px solid var(--ouvir-foco);outline-offset:3px}
/* Lendo: ondas animadas */
.ouvir__botao .onda{transform-box:fill-box;transform-origin:center}
.ouvir.is-playing .onda{animation:ouvir-onda .9s ease-in-out infinite}
.ouvir.is-playing .o2{animation-delay:-.15s}.ouvir.is-playing .o3{animation-delay:-.3s}.ouvir.is-playing .o4{animation-delay:-.45s}.ouvir.is-playing .o5{animation-delay:-.6s}
@keyframes ouvir-onda{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
/* Pausado: botao vazado, ondas paradas */
.ouvir.is-paused .ouvir__botao{background:transparent;color:var(--texto)}
.ouvir.is-paused .onda{opacity:.55}.ouvir.is-paused .o3{opacity:1}
@media (prefers-reduced-motion:reduce){.ouvir.is-playing .onda{animation:none}.ouvir__botao{transition:none}}
@media (max-width:480px){.ouvir__voz{flex:1 1 100%}}
.ouvir__voz[size]{padding:4px;font-size:16px}.ouvir__voz option{padding:8px;font-family:"Libre Franklin",Inter,sans-serif}
.ouvir__voz{color-scheme:light}
:root[data-tema="escuro"] .ouvir__voz{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .ouvir__voz{color-scheme:dark}}
/* --- Integração no The Abel Times (Engenharia, 27/10): o site não tem --fundo/--texto/--apoio nem tema escuro.
   Mapeia para os tokens ADL do style.css; o tema escuro vem de tema.css (mesmo seletor da home v3). Barra fixa no rodapé,
   porque a página da edição é uma página longa com várias matérias e o botão lê a matéria ativa. */
:root{--fundo:var(--bg,#FAF8F5);--texto:var(--text,#0B1F3B);--apoio:#5b6273}
.ouvir{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;margin:0;max-width:calc(100vw - 16px);padding:8px;background:var(--fundo);border:1px solid var(--border,#D4C4B0);border-radius:10px;box-shadow:0 2px 10px rgba(11,31,59,.15)}
@media (max-width:480px){.ouvir{width:calc(100vw - 16px)}}
.ouvir__st{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-materia].lendo{outline:2px solid var(--gold,#C9A961);outline-offset:4px}
footer{padding-bottom:150px}