/* ============================================================
   Voz — uma app à parte (15 out. 2026), com aspeto próprio:
   papel quente, tinta azul-noite e coral para a palavra que se
   está a ouvir. Literata (feita para ler em ecrã) no texto,
   Manrope nos botões e títulos.
   ============================================================ */
:root{
  --fundo:#f4f1ea; --cartao:#fffdf8; --tinta:#1e2a3a; --sobre-tinta:#fffdf8;
  --coral:#ff7a59; --sobre-coral:#1e2a3a; --frase:#fde7dd;
  --texto:#1e2a3a; --texto-leve:#6b7280; --lido:#9aa0a8; --linha:#e6e0d4; --suave:#ece7dc; --campo:#fffdf8;
  --vermelho:#c0392b; --vermelho-suave:#fbe3df;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --fundo:#141a24; --cartao:#1c2431; --tinta:#ff8f70; --sobre-tinta:#141a24;
    --coral:#ff8f70; --sobre-coral:#141a24; --frase:#3a2a2a;
    --texto:#ebe6dc; --texto-leve:#9ba3b0; --lido:#6c7482; --linha:#2a3444; --suave:#253043; --campo:#18202c;
    --vermelho:#ff8a7a; --vermelho-suave:#3a2224;
    color-scheme:dark;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Manrope',system-ui,sans-serif; background:var(--fundo); color:var(--texto);
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  padding-bottom:40px; line-height:1.45;
}
body.a-ouvir{padding-bottom:210px}
h1,h2{font-weight:800;letter-spacing:-.02em;line-height:1.15}
a{color:inherit;text-underline-offset:2px}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none !important}

.coluna{max-width:720px;margin:0 auto;padding:0 16px}

/* ---------- cabeçalho ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 0 16px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none}
.marca img{width:36px;height:36px;border-radius:10px}
.marca h1{font-size:1.5rem}
.titulo-leitor{font-family:'Literata',Georgia,serif;font-weight:600;font-size:1.3rem;overflow-wrap:anywhere;letter-spacing:-.01em}
.sub{font-size:.78rem;font-weight:600;color:var(--texto-leve)}
.pilula{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linha);cursor:pointer;text-decoration:none;
  background:var(--cartao);color:var(--texto);font-weight:700;font-size:.8rem;
  padding:8px 14px;border-radius:999px;white-space:nowrap;
}
.pilula:hover{background:var(--suave)}

/* ---------- pastas ---------- */
.pastas{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}
.pastas::-webkit-scrollbar{display:none}
.pasta{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer;
  border:1px solid var(--linha);background:var(--cartao);color:var(--texto);
  border-radius:999px;padding:8px 14px;font-weight:700;font-size:.82rem;white-space:nowrap;
}
.pasta small{font-weight:600;color:var(--texto-leve);font-size:.72rem}
.pasta.aberta{background:var(--tinta);color:var(--sobre-tinta);border-color:var(--tinta)}
.pasta.aberta small{color:inherit;opacity:.75}
.pasta.nova{border-style:dashed;background:transparent;color:var(--texto-leve)}
.cabeca-pasta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cabeca-pasta h2{margin-bottom:0;overflow-wrap:anywhere}
.juntar{margin-bottom:4px}
select.mover{
  border:1px solid var(--linha);background:var(--campo);border-radius:999px;
  padding:6px 8px;font-size:.76rem;max-width:130px;
}

/* ---------- cartões e listas ---------- */
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:20px;padding:18px;margin-bottom:14px}
.cartao h2{font-size:1rem;margin-bottom:10px}
.dica{font-size:.8rem;color:var(--texto-leve)}
.vazio{font-size:.9rem;color:var(--texto-leve);padding:6px 0}
.lista{list-style:none;margin-top:10px}
.lista li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--linha)}
.lista li:first-child{border-top:none}
.lista .info{flex:1;min-width:0}
.lista .nome{font-family:'Literata',Georgia,serif;font-weight:600;font-size:1rem;overflow-wrap:anywhere}
.lista .meta{font-size:.76rem;color:var(--texto-leve);margin-top:2px}
.lista .acoes{display:flex;gap:6px;flex-shrink:0;align-items:center}
.progresso{height:3px;border-radius:2px;background:var(--suave);margin-top:6px;max-width:220px;overflow:hidden}
.progresso i{display:block;height:100%;background:var(--coral)}

.botao{
  display:inline-block;text-decoration:none;text-align:center;border:none;cursor:pointer;
  border-radius:999px;font-weight:700;font-size:.88rem;
  padding:11px 18px;background:var(--tinta);color:var(--sobre-tinta);
}
.botao.pequeno{padding:8px 14px;font-size:.8rem}
.botao.leve{background:var(--suave);color:var(--texto)}
.botao.perigo{background:transparent;color:var(--vermelho);padding-left:8px;padding-right:8px}
.botao:disabled{opacity:.5;cursor:default}
.fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.campo{display:block;margin-bottom:10px}
.campo span{display:block;font-size:.78rem;font-weight:700;margin-bottom:4px}
.campo input,.campo textarea{
  width:100%;border:1px solid var(--linha);background:var(--campo);border-radius:14px;
  padding:11px 13px;font-size:1rem;
}
.campo textarea{min-height:160px;resize:vertical;font-family:'Literata',Georgia,serif}
.erro{color:var(--vermelho);font-size:.85rem;margin-top:8px}
.erro:empty{display:none}
.caixa-ok{background:var(--frase);color:var(--texto);border-radius:14px;padding:10px 14px;font-size:.88rem;margin-bottom:12px;font-weight:600}
.codigo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;font-size:1.05rem;letter-spacing:.08em}
.escolhe-voz{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--texto-leve)}
.escolhe-voz select{border:1px solid var(--linha);background:var(--campo);border-radius:999px;padding:7px 10px;font-size:.8rem;max-width:200px}
.caixa-erro{background:var(--vermelho-suave);color:var(--vermelho);border-radius:14px;padding:10px 14px;font-size:.88rem;margin-bottom:12px}

/* ---------- entrar ---------- */
.entrar{max-width:360px;margin:14vh auto 0;text-align:center}
.entrar img{width:64px;height:64px;border-radius:18px;margin-bottom:14px}
.entrar h1{font-size:2rem;margin-bottom:4px}
.entrar p{margin-bottom:22px}
.entrar form{text-align:left}
.entrar .botao{width:100%}
.entrar h2{font-size:1.1rem;margin-bottom:12px}
.entrar .troca{margin-top:14px}

/* ---------- o texto a ser lido ---------- */
.leitura{font-family:'Literata',Georgia,serif;font-size:1.16rem;line-height:1.75;padding:22px}
.leitura p{margin-bottom:1em}
.leitura p:last-child{margin-bottom:0}
.bocado{cursor:pointer;border-radius:4px;transition:background .2s,color .2s}
.bocado.lido{color:var(--lido)}
.bocado.atual{background:var(--frase);box-shadow:0 0 0 3px var(--frase)}
.pal{border-radius:4px;transition:background .08s,color .08s}
.pal.agora{background:var(--coral);color:var(--sobre-coral);box-shadow:0 0 0 2px var(--coral)}
@media (hover:hover){ .bocado:not(.atual) .pal:hover{background:var(--suave)} }

/* ---------- o leitor, preso em baixo ---------- */
.leitor{
  position:fixed;left:0;right:0;bottom:0;z-index:5;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--cartao);border-top:1px solid var(--linha);
}
.leitor .dentro{max-width:720px;margin:0 auto}
.barra{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;background:transparent;cursor:pointer;margin:0}
.barra::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--suave)}
.barra::-moz-range-track{height:4px;border-radius:2px;background:var(--suave)}
.barra::-moz-range-progress{height:4px;border-radius:2px;background:var(--coral)}
.barra::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--coral);border:none;margin-top:-6px}
.barra::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--coral);border:none}
.barra-fixa{height:4px;border-radius:2px;background:var(--suave);overflow:hidden;margin-bottom:10px}
.barra-fixa i{display:block;height:100%;background:var(--coral);transition:width .3s}
.posicao{display:flex;justify-content:space-between;font-size:.72rem;color:var(--texto-leve);margin:0 0 2px;font-variant-numeric:tabular-nums}
.preparo{font-size:.88rem;padding:4px 0 2px}
.preparo p+p{margin-top:4px}
.mal{color:var(--vermelho)}
.comandos{display:flex;align-items:center;justify-content:center;gap:16px}
.redondo{
  width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:var(--suave);color:var(--texto);display:grid;place-items:center;
}
.redondo.grande{width:62px;height:62px;background:var(--tinta);color:var(--sobre-tinta)}
.redondo svg{width:22px;height:22px;fill:currentColor}
.redondo.grande svg{width:28px;height:28px}
.redondo:disabled{opacity:.45;cursor:default}
.ajustes{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:.8rem}
.ajustes label{display:flex;align-items:center;gap:6px;color:var(--texto-leve);font-weight:700;min-width:0}
.ajustes .voz{flex:1}
.ajustes select{
  border:1px solid var(--linha);background:var(--campo);border-radius:999px;padding:6px 10px;font-size:.8rem;
  min-width:0;max-width:100%;
}
.ajustes .voz select{flex:1}
.estado{text-align:center;font-size:.78rem;color:var(--texto-leve);min-height:1.2em;margin-top:6px}
.estado.mal{color:var(--vermelho)}
.a-pensar{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:roda .8s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes roda{to{transform:rotate(1turn)}}

@media (max-width:420px){
  .lista .acoes{flex-direction:column;align-items:flex-end;gap:2px}
  .ajustes span{display:none}
  .leitura{padding:18px 16px;font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){ .bocado,.pal,.barra i{transition:none} }