/* Ajustes só deste site. O visual vem de design/tokens.css e design/bundle.css (Design System Voz a Voz):
   mude cores, fontes e componentes lá, não aqui. */

/* Relatório de validação da partitura (só com ?depurar=1) */
.hc-relatorio {
  max-width: var(--leitura); margin: var(--espaco-5) auto 0; padding: 0 var(--espaco-4) var(--espaco-3);
  border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--superficie);
  font: 400 15px/22px var(--font-ui); color: var(--tinta);
}
.hc-relatorio summary { display: flex; align-items: center; min-height: var(--alvo); font-weight: 700; cursor: pointer; }
.hc-relatorio .erro { color: var(--perigo); }
.hc-relatorio .aviso { color: var(--ouro-texto); }
.hc-relatorio .nota { color: var(--tinta-2); }

/* Sem JavaScript */
.hc-sem-js { max-width: var(--leitura); margin: var(--espaco-7) auto; padding: 0 var(--espaco-4); }

/* Logotipo The Harpa Project no cabeçalho (design/marca; desenho gerado em marca.js).
   Na cor do texto, para seguir o tema; a 3ª linha da pauta no ouro do app (bloco "Alinhado ao app" da marca).
   Escada de redução: com a pauta só a partir de corpo S 30 (telas largas); no celular, sem a pauta. */
.hp-marca { align-self: center; padding: 0 var(--espaco-2); color: var(--tinta); }
.hp-marca svg { width: auto; fill: currentColor; overflow: visible; }
.hp-marca .hp-marca__completa { display: none; height: 40px; }
.hp-marca .hp-marca__compacta { display: block; height: 24px; }
.hp-marca .hp-pauta--destaque { fill: var(--ouro); }
@media (min-width: 720px) {
  .hp-marca .hp-marca__completa { display: block; }
  .hp-marca .hp-marca__compacta { display: none; }
}