/* ============================================================
   FILOMENTE — _reader-toolbar.css
   Barra de Ferramentas de Leitura, Acessibilidade, Temas e Progresso
   ============================================================ */

/* ------------------------------------------------------------
   1. Barra de Progresso de Leitura Fixa no Topo
   ------------------------------------------------------------ */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3.5px;
  background: linear-gradient(90deg, #2E6FB5, #4FA8D8, #F59E0B);
  z-index: 10001;
  transition: width 0.1s ease-out;
  box-shadow: 0 1px 4px rgba(46, 111, 181, 0.4);
}

/* ------------------------------------------------------------
   2. Barra de Ferramentas de Leitura (Reader Toolbar)
   ------------------------------------------------------------ */
.reader-toolbar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--phm-teal);
  border-radius: var(--phm-radius-md);
  padding: 0.6rem 1rem;
  margin: 0 0 2rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  box-shadow: var(--sombra-leve);
}

.reader-toolbar__group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.reader-toolbar__label {
  font-family: var(--fonte-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 0.25rem;
}

.reader-btn {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--navy);
  padding: 0.35rem 0.65rem;
  border-radius: var(--phm-radius-sm);
  font-family: var(--fonte-mono);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--transicao-rapida);
}

.reader-btn:hover {
  background: var(--surface);
  border-color: var(--phm-teal);
  color: var(--phm-teal);
}

.reader-btn.is-active {
  background: var(--phm-teal);
  color: #FFFFFF;
  border-color: var(--phm-teal);
}

.reader-btn.is-playing {
  background: var(--phm-teal);
  color: #FFFFFF;
  border-color: var(--phm-teal);
  animation: pulse-audio-filo 1.5s infinite;
}

@keyframes pulse-audio-filo {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.reader-theme-btn {
  width: 22px;
  height: 22px;
  border-radius: var(--phm-radius-sm);
  border: 1.5px solid var(--line);
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.reader-theme-btn:hover {
  transform: scale(1.1);
}

.reader-theme-btn.is-active {
  border-color: var(--phm-teal);
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.35);
}

.reader-theme-btn--light {
  background: #FFFFFF;
  border-color: #CBD5E1;
}

.reader-theme-btn--sepia {
  background: #F4ECD8;
  border-color: #D4C3A3;
}

.reader-theme-btn--dark {
  background: #060b17;
  border-color: rgba(255, 255, 255, 0.25);
}

#btnAudioStop {
  display: none;
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
}

#audioStatusText {
  font-size: 0.78rem;
  color: #2E6FB5;
  font-weight: 600;
}

@media (max-width: 640px) {
  .reader-toolbar {
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
  }

  .reader-toolbar__label {
    display: none;
  }

  .reader-btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }

  .reader-theme-btn {
    width: 22px;
    height: 22px;
  }
}

/* ------------------------------------------------------------
   3. Temas de Contraste (Sépia e Noturno)
   ------------------------------------------------------------ */

/* Tema Sépia */
html.theme-sepia,
body.theme-sepia {
  background-color: #F4ECD8 !important;
  color: #3D2E1E !important;
}

body.theme-sepia .pagina-conteudo,
body.theme-sepia .container,
body.theme-sepia section:not(.banner):not(.temas-destaque) {
  background-color: #F4ECD8 !important;
  color: #3D2E1E !important;
}

body.theme-sepia h1:not(.banner *),
body.theme-sepia h2:not(.banner *),
body.theme-sepia h3:not(.banner *),
body.theme-sepia h4:not(.banner *) {
  color: #4A3525 !important;
}

body.theme-sepia p:not(.banner *):not(.frase-dia),
body.theme-sepia li:not(.banner *),
body.theme-sepia blockquote {
  color: #3D2E1E !important;
}

body.theme-sepia blockquote {
  background: #EDE2C8 !important;
  border-left-color: #8B6914 !important;
}

body.theme-sepia .reader-toolbar {
  background: #EDE2C8 !important;
  border-color: #D4C3A3 !important;
}

body.theme-sepia .reader-btn {
  background: #FAF4E6 !important;
  border-color: #D4C3A3 !important;
  color: #3D2E1E !important;
}

body.theme-sepia .reader-btn.is-active {
  background: #8B6914 !important;
  color: #FFFFFF !important;
  border-color: #8B6914 !important;
}

body.theme-sepia .card,
body.theme-sepia .tema-card {
  background: #FAF4E6 !important;
  border-color: #D4C3A3 !important;
}

/* Tema Noturno (Dark Mode) */
html.theme-dark,
body.theme-dark {
  background-color: #0B132B !important;
  color: #E2E8F0 !important;
}

body.theme-dark .pagina-conteudo,
body.theme-dark .container,
body.theme-dark section:not(.banner):not(.temas-destaque) {
  background-color: #0B132B !important;
  color: #E2E8F0 !important;
}

body.theme-dark h1:not(.banner *),
body.theme-dark h2:not(.banner *),
body.theme-dark h3:not(.banner *),
body.theme-dark h4:not(.banner *) {
  color: #F8FAFC !important;
}

body.theme-dark p:not(.banner *):not(.frase-dia),
body.theme-dark li:not(.banner *),
body.theme-dark span:not(.logo-mente):not(.badge):not(.tag-pequena) {
  color: #CBD5E1 !important;
}

body.theme-dark blockquote {
  background: #1C2541 !important;
  border-left-color: #4FA8D8 !important;
  color: #F8FAFC !important;
}

body.theme-dark .reader-toolbar {
  background: #1C2541 !important;
  border-color: #334155 !important;
}

body.theme-dark .reader-toolbar__label {
  color: #94A3B8 !important;
}

body.theme-dark .reader-btn {
  background: #0B132B !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}

body.theme-dark .reader-btn:hover {
  background: #334155 !important;
  color: #FFFFFF !important;
}

body.theme-dark .reader-btn.is-active {
  background: #4FA8D8 !important;
  color: #0B132B !important;
  border-color: #4FA8D8 !important;
}

body.theme-dark .card,
body.theme-dark .tema-card {
  background: #1C2541 !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}

body.theme-dark .card h3,
body.theme-dark .tema-card h3 {
  color: #F8FAFC !important;
}

body.theme-dark .card p,
body.theme-dark .tema-card p {
  color: #94A3B8 !important;
}

body.theme-dark .card-resultado {
  background: #1C2541 !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}

body.theme-dark .card-resultado-titulo h3 a {
  color: #F8FAFC !important;
}

body.theme-dark .card-resultado-descricao {
  color: #94A3B8 !important;
}

body.theme-dark .modal-sobre__caixa,
body.theme-dark .modal-msg__caixa {
  background: #1C2541 !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}

body.theme-dark .modal-sobre__conteudo p,
body.theme-dark .modal-msg__texto,
body.theme-dark .modal-msg__reflexao {
  color: #E2E8F0 !important;
}

body.theme-dark .modal-sobre__destaque,
body.theme-dark .modal-msg__citacao {
  background: #0B132B !important;
  color: #F8FAFC !important;
}