/* CSS especifico da atividade "annotated-diagram". */

/* Rótulo centralizado exatamente no ponto — o padrão, usado quando a região
   já é grande e clara o bastante pra não precisar de marcador separado. */
.da-rotulo-centro {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

/* Marcador + linha + rótulo deslocado: usado quando o rótulo em cima do
   próprio ponto atrapalharia a leitura do desenho (ex.: um traço fino). O
   wrapper .da-ponto fica no ponto exato (sem transform); os três filhos se
   posicionam a partir dali. */
.da-marcador {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #6366f1;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, .5);
  z-index: 2;
}
.dark .da-marcador {
  border-color: #0f172a;
}

.da-linha {
  position: absolute;
  top: -1px;
  height: 2px;
  background: #6366f1;
  opacity: .55;
  z-index: 1;
}
.da-linha-direita {
  left: 0;
  width: 26px;
}

.da-rotulo-direita {
  position: absolute;
  left: 32px;
  top: 0;
  transform: translateY(-50%);
  z-index: 3;
}

/* Destaque ao passar o mouse (ou focar) num rótulo da imagem ou no bloco de
   detalhe embaixo — o par correspondente acende junto, reforçando a ligação
   entre os dois sem esconder nenhum dos dois por trás de clique. */
.da-ponto.da-destaque .da-rotulo {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}
.da-detalhe {
  padding: 6px 8px;
  margin: 0 -8px;
}
.da-detalhe.da-destaque {
  background: rgba(99, 102, 241, .07);
}