/* tocador.css: o player. O botão dourado de tocar à esquerda; à direita o capítulo que toca, a barra que enche
   de dourado conforme anda e os relógios; embaixo os comandos em pílulas de contorno. Dentro do cartão do último
   episódio ele é só um bloco; na página do episódio ganha o cartão branco (.tocador--cartao).
   O .tocador-vazio ocupa o mesmo lugar quando o episódio não tem áudio.
   Depende de: base.css e o player.js do comum (que escreve --progresso e data-tocador no <html>).
   Telefone nas regras soltas, computador no @media do fim. */

.tocador { display: grid; gap: 14px; }

.tocador--cartao { padding: 18px; }

.tocador__linha { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; }

.tocador__tocar {
  display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: var(--dourado); color: var(--marinho);
  box-shadow: 0 6px 18px rgba(201, 162, 39, .35);
}
.tocador__tocar:hover { background: var(--dourado-escuro); }
.tocador__tocar svg { width: 24px; height: 24px; fill: currentColor; }

.icone--pausar { display: none; }
[data-tocador="tocando"] .icone--tocar { display: none; }
[data-tocador="tocando"] .icone--pausar { display: block; }

.tocador__info { display: grid; gap: 6px; min-width: 0; }

.tocador__capitulo {
  min-height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--marinho);
}

/* ------------------------------------------------------------ a barra */

.tocador__barra {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 4px 0;
  border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--dourado) calc(var(--progresso, 0) * 100%), var(--linha) 0);
}
.tocador__barra::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border: 3px solid var(--branco); border-radius: 50%;
  background: var(--marinho); box-shadow: 0 1px 4px rgba(11, 31, 58, .3);
}
.tocador__barra::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid var(--branco); border-radius: 50%; background: var(--marinho); }
.tocador__barra::-moz-range-track { background: transparent; }

.tocador__relogios { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ comandos */

.tocador__comandos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.tocador__comandos button,
.tocador__comandos a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--linha); border-radius: 999px; background: var(--branco); color: var(--marinho);
  font-size: 13px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums;
}
.tocador__comandos button:hover,
.tocador__comandos a:hover { border-color: var(--dourado); }

.tocador__retomar { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--dourado-escuro); }

/* ------------------------------------------------------------ sem áudio */

.tocador-vazio { padding: 24px; text-align: center; color: var(--texto-suave); }
.tocador-vazio a { color: var(--marinho); font-weight: 600; }

/* ------------------------------------------------------------ a janela de compartilhar */

/* O player.js do comum monta esta janela sozinho (as classes vêm dele, não de uma página):
   a marca "começar em", o endereço pronto e os dois botões, o do WhatsApp em dourado. */
.compartilhar { display: grid; gap: 12px; }

.compartilhar__minuto { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--marinho); }
.compartilhar__minuto input { width: 18px; height: 18px; margin: 0; accent-color: var(--dourado); }

.compartilhar__endereco {
  width: 100%; min-height: 42px; padding: 0 12px;
  border: 1px solid var(--linha); border-radius: var(--raio-pequeno); background: var(--gelo); color: var(--texto-suave);
  font: inherit; font-size: 14px;
}

.compartilhar__botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.compartilhar__botao {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--linha); border-radius: var(--raio-pequeno); background: var(--branco); color: var(--marinho);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.compartilhar__botao:hover { border-color: var(--dourado); }

.compartilhar__botao--zap { border-color: var(--dourado); background: var(--dourado); }
.compartilhar__botao--zap:hover { border-color: var(--dourado-escuro); background: var(--dourado-escuro); }

@media (min-width: 900px) {
  .tocador--cartao { padding: 24px 28px; }
  .tocador__linha { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; }
  .tocador__tocar { width: 64px; height: 64px; }
  .tocador__tocar svg { width: 28px; height: 28px; }
  .tocador__capitulo { font-size: 15px; }
}