/* janela.css: as janelas do comum (onde ouvir, transcrição, menu, compartilhar) no escuro deste desenho. O casco vem
   do ../comum/modal.css, que lê --cartao, --fundo, --texto, --texto-fraco, --linha e --raio do base.css; aqui só o
   que ele não sabe: o fundo mais fechado atrás da janela e a caixa "Compartilhar", que o player.js do comum monta
   (com as classes compartilhar, compartilhar__minuto, __endereco, __botoes e __botao).
   Depende de: ../comum/modal.css e base.css. Vale igual no telefone e no computador. */

.modal-fundo { background: rgba(0, 0, 0, .7); }

.modal { border: 1px solid var(--linha); box-shadow: 0 24px 70px rgba(0, 0, 0, .7); }

/* ------------------------------------------------------------ compartilhar */

.compartilhar { display: grid; gap: 12px; }

.compartilhar__minuto { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto-suave); }
.compartilhar__minuto input { width: 18px; height: 18px; accent-color: var(--verde); }

.compartilhar__endereco {
  width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--painel); color: var(--texto); font-size: 14px;
}

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

.compartilhar__botao {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--superficie-alta); font-size: 14px; font-weight: 700; text-decoration: none;
}
.compartilhar__botao:hover { background: var(--superficie-apertada); }