#chords {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.chord {
  width: 80px;
  font-family: sans-serif;
}

.chord-title {
  font-size: 202px;
  font-weight: 900;
  margin-bottom: 12px;
  color: #ffcc00;
  text-shadow: 0 0 5px #ffcc00;
  text-align: center;
}

.chord-main {
  position: relative;
  width: 80px;
  height: 130px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  overflow: hidden;
}

/* Fundo para o braço do violão */
.chord-main.violao {
  background-image: url('/wp-content/uploads/violao-braco.png');
}

/* Fundo para o braço do cavaquinho */
.chord-main.cavaquinho {
  background-image: url('/wp-content/uploads/cavaquinho-braco.png');
}

/* ================================ */
/* ESTILIZAÇÕES ESPECÍFICAS VIOLÃO */
/* ================================ */

/* Notas do violão */
.chord-main.violao .note {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ffcc00;
  border-radius: 50%;
  box-shadow: 0 0 4px #ffcc00;
  border: 1px solid #000;
  z-index: 10;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #000;
}

/* Cordas do violão */
.chord-main.violao .string-1 { left: 94%; }  /* 1ª corda (mais fina) */
.chord-main.violao .string-2 { left: 77%; }  /* 2ª corda */
.chord-main.violao .string-3 { left: 59%; }  /* 3ª corda */
.chord-main.violao .string-4 { left: 41%; }  /* 4ª corda */
.chord-main.violao .string-5 { left: 24%; }  /* 5ª corda */
.chord-main.violao .string-6 { left: 8%; }   /* 6ª corda (mais grossa) */

/* Trastes do violão */
.chord-main.violao .fret-0 { top: 8px; }   /* Corda solta */
.chord-main.violao .fret-1 { top: 14px; }  /* 1ª casa */
.chord-main.violao .fret-2 { top: 31px; }  /* 2ª casa */
.chord-main.violao .fret-3 { top: 48px; }  /* 3ª casa */
.chord-main.violao .fret-4 { top: 80px; }  /* 4ª casa */
.chord-main.violao .fret-5 { top: 98px; }  /* 5ª casa */

/* Pestanas do violão */
.chord-main.violao .pestana {
  position: absolute;
  height: 8px;
  background-color: #333;
  border-radius: 4px;
  z-index: 5;
  transform: translateY(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Pestanas do violão por largura */
.chord-main.violao .pestana-2 { width: 25%; left: 12%; }  /* 2 cordas */
.chord-main.violao .pestana-3 { width: 38%; left: 12%; }  /* 3 cordas */
.chord-main.violao .pestana-4 { width: 51%; left: 12%; }  /* 4 cordas */
.chord-main.violao .pestana-5 { width: 95%; left: 4%; }   /* 5 cordas */
.chord-main.violao .pestana-6 { width: 77%; left: 12%; }  /* 6 cordas */

/* Pestanas do violão por traste */
.chord-main.violao .pestana.fret-1 { top: 15px; }
.chord-main.violao .pestana.fret-2 { top: 31px; }
.chord-main.violao .pestana.fret-3 { top: 62px; }
.chord-main.violao .pestana.fret-4 { top: 80px; }
.chord-main.violao .pestana.fret-5 { top: 98px; }

.chord-main.violao .pestana.invertida {
  background-color: #8B0000;
}

/* ==================================== */
/* ESTILIZAÇÕES ESPECÍFICAS CAVAQUINHO */
/* ==================================== */

/* Notas do cavaquinho */
.chord-main.cavaquinho .note {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ffcc00;
  border-radius: 50%;
  box-shadow: 0 0 4px #ffcc00;
  border: 1px solid #000;
  z-index: 10;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #000;
}

/* Cordas do cavaquinho (só 4 cordas) */
.chord-main.cavaquinho .string-1 { left: 94%; }  /* 1ª corda */
.chord-main.cavaquinho .string-2 { left: 61%; }  /* 2ª corda */
.chord-main.cavaquinho .string-3 { left: 59%; }  /* 3ª corda */
.chord-main.cavaquinho .string-4 { left: 8%; }  /* 4ª corda */
.chord-main.cavaquinho .string-5 { display: none; } /* Oculta 5ª corda */
.chord-main.cavaquinho .string-6 { display: none; } /* Oculta 6ª corda */

/* Trastes do cavaquinho */
.chord-main.cavaquinho .fret-0 { top: 8px; }   /* Corda solta */
.chord-main.cavaquinho .fret-1 { top: 14px; }  /* 1ª casa */
.chord-main.cavaquinho .fret-2 { top: 31px; }  /* 2ª casa */
.chord-main.cavaquinho .fret-3 { top: 48px; }  /* 3ª casa */
.chord-main.cavaquinho .fret-4 { top: 80px; }  /* 4ª casa */
.chord-main.cavaquinho .fret-5 { top: 98px; }  /* 5ª casa */

/* Pestanas do cavaquinho */
.chord-main.cavaquinho .pestana {
  position: absolute;
  height: 8px;
  background-color: #333;
  border-radius: 4px;
  z-index: 5;
  transform: translateY(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Pestanas do cavaquinho por largura (só até 4 cordas) */
.chord-main.cavaquinho .pestana-2 { width: 25%; left: 12%; }  /* 2 cordas */
.chord-main.cavaquinho .pestana-3 { width: 38%; left: 12%; }  /* 3 cordas */
.chord-main.cavaquinho .pestana-4 { width: 51%; left: 12%; }  /* 4 cordas */
.chord-main.cavaquinho .pestana-5 { display: none; } /* Oculta pestana 5 cordas */
.chord-main.cavaquinho .pestana-6 { display: none; } /* Oculta pestana 6 cordas */

/* Pestanas do cavaquinho por traste */
.chord-main.cavaquinho .pestana.fret-1 { top: 15px; }
.chord-main.cavaquinho .pestana.fret-2 { top: 31px; }
.chord-main.cavaquinho .pestana.fret-3 { top: 62px; }
.chord-main.cavaquinho .pestana.fret-4 { top: 80px; }
.chord-main.cavaquinho .pestana.fret-5 { top: 98px; }

.chord-main.cavaquinho .pestana.invertida {
  background-color: #8B0000;
}
/* ✅ CSS PARA ACORDES */
.cifra-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    font-family: 'Courier New', monospace;
}

.chord-line {
    color: #0066cc;
    font-weight: bold;
    margin: 8px 0 2px 0;
    font-size: 14px;
    line-height: 1.2;
}

.chord-highlight {
    background-color: #e6f3ff;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #cce7ff;
}

.chord-highlight:hover {
    background-color: #b3d9ff;
    transform: translateY(-1px);
}

.lyric-line {
    margin: 2px 0 8px 0;
    line-height: 1.4;
    font-size: 16px;
    color: #333;
}

.acordes-encontrados {
    margin-top: 30px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.acordes-encontrados h4 {
    margin-bottom: 10px;
    color: #495057;
}

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

.acorde-item {
    display: inline-block;
    margin: 2px;
    font-size: 14px;
    font-weight: bold;
}