/* Sistema posicional de escalas */

:root {
  --fundo: #faf9f7;
  --superficie: #ffffff;
  --texto: #2a2733;
  --texto-sec: #6f6a7a;
  --borda: #e3e0ea;
  --borda-forte: #c9c4d4;

  /* Paleta do material impresso do autor */
  --cor-tonica: #0e9488;    /* teal — tônica */
  --cor-tom: #7c5cbf;       /* roxo — alcançada por tom */
  --cor-semitom: #e8804f;   /* coral/âmbar — alcançada por semitom */
  --cor-tomemeio: #d9482b;  /* coral forte — alcançada por tom e meio */
  --cor-contexto: #b9b4c2;  /* cinza — notas da escala fora do grupo */

  --destaque-fundo: #f1ecfb;
  --destaque-borda: #b49ae0;
  --texto-na-nota: #ffffff;
}

/* Tema escuro: automático (segue o sistema, a menos que o usuário force o claro)
   ou forçado via data-tema="escuro". Os dois blocos devem ficar idênticos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #17151d;
    --superficie: #211e2a;
    --texto: #eceaf2;
    --texto-sec: #9d97ab;
    --borda: #373342;
    --borda-forte: #4c475a;

    --cor-tonica: #23b3a4;
    --cor-tom: #9d7fe0;
    --cor-semitom: #ef925e;
    --cor-tomemeio: #f0603c;
    --cor-contexto: #5a5566;

    --destaque-fundo: #2a2440;
    --destaque-borda: #7c5cbf;
  }
}

:root[data-tema="escuro"] {
  --fundo: #17151d;
  --superficie: #211e2a;
  --texto: #eceaf2;
  --texto-sec: #9d97ab;
  --borda: #373342;
  --borda-forte: #4c475a;

  --cor-tonica: #23b3a4;
  --cor-tom: #9d7fe0;
  --cor-semitom: #ef925e;
  --cor-tomemeio: #f0603c;
  --cor-contexto: #5a5566;

  --destaque-fundo: #2a2440;
  --destaque-borda: #7c5cbf;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
}

.pagina {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

/* ---------- Intro ---------- */

h1 {
  font-size: 1.9rem;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

.intro p { max-width: 46rem; margin: 0.6rem 0; }

.intro strong { font-weight: 700; }

.ler-mais {
  display: none;
  background: none;
  border: none;
  color: var(--cor-tom);
  font: inherit;
  font-weight: 600;
  padding: 0.2rem 0;
  cursor: pointer;
  text-decoration: underline;
}

.credito {
  font-size: 0.85rem;
  color: var(--texto-sec);
  margin-top: 0.9rem;
}

/* ---------- Controles ---------- */

.controles {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin: 1.6rem 0 1.2rem;
  padding: 0.9rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
}

.controle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.controle select {
  font: inherit;
  font-weight: 400;
  color: var(--texto);
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}

.btn-tema {
  margin-left: auto;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-sec);
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
}

.btn-tema:hover {
  color: var(--texto);
  border-color: var(--destaque-borda);
}

/* ---------- Linha de graus ---------- */

.graus {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  overflow-x: auto;
  padding: 0.5rem 0.25rem;
}

.grau {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 2.6rem;
  padding: 0.3rem 0.25rem;
  border-radius: 8px;
}

.grau .romano {
  font-size: 0.72rem;
  color: var(--texto-sec);
  letter-spacing: 0.06em;
}

.grau .nota {
  font-size: 1.15rem;
  font-weight: 700;
}

.intervalo {
  font-size: 0.75rem;
  color: var(--texto-sec);
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
  white-space: nowrap;
}

.grau-destaque { background: var(--destaque-fundo); }

/* ---------- Linha de códigos ---------- */

.codigos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.8rem 0 1.4rem;
}

.codigo {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--texto);
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  border-radius: 10px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}

.codigo:hover { border-color: var(--destaque-borda); }

.codigo.ativo {
  background: var(--destaque-fundo);
  border-color: var(--destaque-borda);
}

.cod-nome { color: var(--cor-tonica); margin-right: 0.1em; }

/* O "10" de tom e meio se distingue por cor e peso — nunca só pelo hífen. */
.cod-tomemeio { color: var(--cor-tomemeio); font-weight: 800; }

.cod-hifen { color: var(--texto-sec); }

/* ---------- Grade de colunas ---------- */

.colunas {
  display: grid;
  grid-template-columns: repeat(var(--n-colunas, 3), minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.coluna {
  background: var(--superficie);
  border: 1.5px solid var(--borda);
  border-radius: 14px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.coluna-destaque {
  border-color: var(--destaque-borda);
  background: var(--destaque-fundo);
}

.grupo-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.seletor {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.seletor-rotulo {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-sec);
  margin-right: 0.15rem;
}

.opcao {
  font: inherit;
  font-weight: 600;
  min-width: 1.8rem;
  padding: 0.25rem 0.35rem;
  color: var(--texto);
  background: var(--fundo);
  border: 1.5px solid var(--borda-forte);
  border-radius: 8px;
  cursor: pointer;
}

.opcao:hover { border-color: var(--destaque-borda); }

.opcao.sel {
  background: var(--cor-tom);
  border-color: var(--cor-tom);
  color: var(--texto-na-nota);
}

/* Inválida: desabilitada, não escondida. Continua focável para o tooltip. */
.opcao.invalido {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.aviso {
  font-size: 0.8rem;
  color: var(--texto-sec);
  background: var(--fundo);
  border-left: 3px solid var(--cor-semitom);
  padding: 0.4rem 0.6rem;
  border-radius: 0 8px 8px 0;
  margin: 0;
}

.sem-diagrama {
  font-size: 0.85rem;
  color: var(--texto-sec);
  padding: 1.5rem 0.5rem;
  text-align: center;
  margin: 0;
}

.legenda-codigo {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.nota-amplitude {
  display: block;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--texto-sec);
}

/* ---------- SVG do braço ---------- */

.braco { width: 100%; height: auto; display: block; }

.braco .corda { stroke: var(--borda-forte); stroke-width: 1.4; }
.braco .traste { stroke: var(--borda); stroke-width: 1.6; }
.braco .pestana { stroke: var(--texto); stroke-width: 5; }
.braco .marcador { fill: var(--borda); }

.braco .rotulo-corda {
  fill: var(--texto-sec);
  font-size: 10px;
  font-family: inherit;
}

.braco .num-casa {
  fill: var(--texto-sec);
  font-size: 10.5px;
  font-family: inherit;
}

.braco .num-casa-12 { font-weight: 700; fill: var(--texto); }

.braco .nota-contexto {
  fill: none;
  stroke: var(--cor-contexto);
  stroke-width: 1.4;
}

.braco .nota-grupo { stroke: none; }
.braco .nota-tonica { fill: var(--cor-tonica); }
.braco .nota-tom { fill: var(--cor-tom); }
.braco .nota-semitom { fill: var(--cor-semitom); }
.braco .nota-tomemeio { fill: var(--cor-tomemeio); }

/* Contorno duplo: distingue o tom e meio do semitom sem depender só da cor. */
.braco .anel-tomemeio {
  fill: none;
  stroke: var(--cor-tomemeio);
  stroke-width: 1.8;
}

.braco .nome-nota {
  fill: var(--texto-na-nota);
  font-size: 9.5px;
  font-weight: 700;
  font-family: inherit;
}

.braco .nome-nota-longo { font-size: 7.5px; }

/* Amplitude 5: aceitável, marcada com contorno tracejado. */
.braco .quadro-aceitavel {
  fill: none;
  stroke: var(--texto-sec);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}

/* ---------- Legenda de cores ---------- */

.legenda-cores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--texto-sec);
}

.chave { display: inline-flex; align-items: center; gap: 0.35rem; }

.ponto {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: inline-block;
}

.ponto-tonica { background: var(--cor-tonica); }
.ponto-tom { background: var(--cor-tom); }
.ponto-semitom { background: var(--cor-semitom); }
.ponto-tomemeio { background: var(--cor-tomemeio); box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3.5px var(--cor-tomemeio); }
.ponto-contexto { background: none; border: 1.5px solid var(--cor-contexto); }

/* ---------- Responsivo ---------- */

@media screen and (max-width: 900px) {
  .colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 640px) {
  .colunas { grid-template-columns: 1fr; }
  .codigo { font-size: 1.3rem; }

  /* "Ler mais": só o primeiro parágrafo fica sempre visível. */
  .intro-mais { display: none; }
  .intro.intro-aberta .intro-mais { display: block; }
  .ler-mais { display: inline-block; }
}

/* ---------- Impressão: sempre em tema claro, sem controles ---------- */

@media print {
  :root:not([data-tema="claro"]),
  :root[data-tema="escuro"] {
    --fundo: #ffffff;
    --superficie: #ffffff;
    --texto: #2a2733;
    --texto-sec: #6f6a7a;
    --borda: #e3e0ea;
    --borda-forte: #c9c4d4;

    --cor-tonica: #0e9488;
    --cor-tom: #7c5cbf;
    --cor-semitom: #e8804f;
    --cor-tomemeio: #d9482b;
    --cor-contexto: #b9b4c2;

    --destaque-fundo: #f1ecfb;
    --destaque-borda: #b49ae0;
  }

  .controles, .btn-tema, .ler-mais { display: none; }
  .coluna { break-inside: avoid; }
}