/* ==========================================================================
   AIVC Chord Transposer — Frontend Styles
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Poppins:wght@600;700;800&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  --aivc-chord-color:       #1e3a5f;
  --aivc-chord-font:        'Courier New', 'Consolas', monospace;
  --aivc-section-color:     #374151;
  --aivc-bg:                #ffffff;
  --aivc-surface:           #f9fafb;
  --aivc-border:            #e5e7eb;
  --aivc-border-light:      #f3f4f6;
  --aivc-text:              #111827;
  --aivc-text-muted:        #6b7280;
  --aivc-text-faint:        #9ca3af;
  --aivc-blue:              #2563eb;
  --aivc-blue-hover:        #1d4ed8;
  --aivc-blue-light:        #eff6ff;
  --aivc-green:             #16a34a;
  --aivc-green-light:       #f0fdf4;
  --aivc-radius:            10px;
  --aivc-radius-sm:         6px;
  --aivc-transition:        0.14s ease;

  /* ── Marca AIVC ── */
  --aivc-coral:      #FB5F6D;
  --aivc-navy:       #1e3a5f;
  --aivc-warm-bg:    #faf9f7;
  --aivc-gray-mid:   #b0aea5;
  --aivc-gray-light: #e8e6dc;


/* ── Visor standalone ───────────────────────────────────────────────────── */
.aivc-visor {
  max-width:   880px;
  margin:      0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color:       var(--aivc-text);
  background:  var(--aivc-bg);
}

/* ── Song header ────────────────────────────────────────────────────────── */
.aivc-song-header {
  padding-bottom: 18px;
  margin-bottom:  0;
}

.aivc-song-info { margin-bottom: 10px; }

.aivc-song-title {
  font-size:   2rem;
  font-weight: 800;
  line-height: 1.15;
  margin:      0 0 4px;
  color:       var(--aivc-text);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.aivc-song-subtitle {
  font-size:  0.82rem;
  color:      var(--aivc-text-muted);
  margin:     0 0 2px;
  font-style: italic;
}

.aivc-song-artist {
  font-size:  0.875rem;
  color:      var(--aivc-text-muted);
  margin:     0 0 8px;
  font-style: italic;
}

/* Info line: Key: G | BPM: 71 | 4/4 */
.aivc-song-badges {
  display:     flex;
  align-items: center;
  gap:         0;
  flex-wrap:   wrap;
  margin-bottom: 16px;
}

.aivc-meta-badge {
  display:      flex;
  align-items:  center;
  gap:          5px;
  padding:      0 14px 0 0;
  margin-right: 14px;
  border-right: 1px solid var(--aivc-border);
  line-height:  1;
}

.aivc-meta-badge:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.aivc-meta-label {
  font-size:      0.72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--aivc-text-faint);
}

.aivc-meta-value {
  font-size:   0.92rem;
  font-weight: 700;
  color:       var(--aivc-text);
}

.aivc-key-badge .aivc-meta-value {
  color:       var(--aivc-blue);
  font-family: var(--aivc-chord-font);
  font-size:   1rem;
}

/* ── Controls bar ───────────────────────────────────────────────────────── */
.aivc-controls {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  padding:         10px 16px;
  background:      var(--aivc-surface);
  border:          1px solid var(--aivc-border);
  border-radius:   var(--aivc-radius);
  margin-bottom:   16px;
  flex-wrap:       wrap;
}

.aivc-transpose-controls,
.aivc-action-controls {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   nowrap;
}

/* ── Hide-chords toggle ─────────────────────────────────────────────────── */
.aivc-song-content.aivc-hide-chords .aivc-chord { display: none !important; }
.aivc-song-content.aivc-hide-chords .aivc-line  { line-height: 1.6 !important; }

/* Intercambio de íconos del Ojo */
.aivc-chords-toggle-btn.is-active .aivc-icon-eye-open  { display: none !important; }
.aivc-chords-toggle-btn.is-active .aivc-icon-eye-closed { display: block !important; }

.aivc-chords-toggle-btn {
  width:            36px !important;
  height:           36px !important;
  border:           2px solid #1a1a1a !important;
  border-radius:    8px !important;
  background-color: #ffffff !important;
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  cursor:           pointer;
  padding:          0 !important;
  color:            #1a1a1a !important;
  transition:       all 0.2s ease;
  flex-shrink:      0;
}
.aivc-chords-toggle-btn:hover    { background-color: #f0f0f0 !important; }
.aivc-chords-toggle-btn.is-active {
  background-color: #1a1a1a !important;
  color:            #ffffff !important;
}

/* ── Tooltips CSS instantáneos ──────────────────────────────────────────── */
.aivc-tooltip-target { position: relative; }
.aivc-tooltip-target::after {
  content:          attr(data-tooltip);
  position:         absolute;
  bottom:           120%;
  left:             50%;
  transform:        translateX(-50%);
  background-color: #000000 !important;
  color:            #ffffff !important;
  padding:          6px 12px !important;
  border-radius:    2px !important;
  font-size:        12px !important;
  font-family:      'Montserrat', sans-serif !important;
  font-weight:      500 !important;
  letter-spacing:   0.3px !important;
  white-space:      nowrap;
  pointer-events:   none;
  opacity:          0;
  visibility:       hidden;
  transition:       opacity 0.1s ease-in-out;
  z-index:          9999;
  box-shadow:       none !important;
  text-transform:   none !important;
}
.aivc-tooltip-target:hover::after {
  opacity:    1;
  visibility: visible;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.aivc-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  padding:         7px 14px;
  font-size:       0.8rem;
  font-weight:     600;
  line-height:     1;
  cursor:          pointer;
  border:          1px solid var(--aivc-border);
  border-radius:   var(--aivc-radius-sm);
  background:      var(--aivc-bg);
  color:           var(--aivc-text);
  transition:      all var(--aivc-transition);
  white-space:     nowrap;
  text-decoration: none;
  user-select:     none;
  -webkit-user-select: none;
}

.aivc-btn:hover:not(:disabled) {
  background:   var(--aivc-border-light);
  border-color: #d1d5db;
}

.aivc-btn:disabled { opacity: .45; cursor: not-allowed; }

.aivc-btn-semitone {
  font-family: var(--aivc-chord-font);
  font-size:   0.9rem;
  padding:     7px 12px;
}

.aivc-btn-down {
  color:        #dc2626;
  border-color: #fca5a5;
  background:   #fff5f5;
}
.aivc-btn-down:hover:not(:disabled) { background: #fee2e2; border-color: #f87171; }

.aivc-btn-up {
  color:        #16a34a;
  border-color: #86efac;
  background:   #f0fdf4;
}
.aivc-btn-up:hover:not(:disabled) { background: #dcfce7; border-color: #4ade80; }

.aivc-semitone-display {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-width:      44px;
  padding:        4px 8px;
  border:         1px solid var(--aivc-border);
  border-radius:  var(--aivc-radius-sm);
  background:     var(--aivc-bg);
}

.aivc-semitone-count {
  font-family: var(--aivc-chord-font);
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--aivc-text-muted);
  line-height: 1.1;
  transition:  color var(--aivc-transition);
}
.aivc-semitone-count.is-active { color: var(--aivc-blue); }

.aivc-semitone-label {
  font-size:  0.58rem;
  color:      var(--aivc-text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1px;
}

.aivc-btn-reset { color: var(--aivc-text-muted); }
.aivc-btn-reset:hover:not(:disabled) { color: var(--aivc-text); }

.aivc-btn-pdf-ref { color: var(--aivc-text-muted); font-size: .78rem; }

/* Download: solo letra */
.aivc-btn-dl-lyrics {
  background:   var(--aivc-green-light);
  border-color: #86efac;
  color:        var(--aivc-green);
}
.aivc-btn-dl-lyrics:hover:not(:disabled) {
  background: #dcfce7; border-color: #4ade80; color: #14532d;
}

/* Download: con acordes */
.aivc-btn-dl-chords,
.aivc-btn-pdf {
  background:   var(--aivc-blue);
  border-color: var(--aivc-blue);
  color:        #fff;
}
.aivc-btn-dl-chords:hover:not(:disabled),
.aivc-btn-pdf:hover:not(:disabled) {
  background: var(--aivc-blue-hover); border-color: var(--aivc-blue-hover); color: #fff;
}

/* ── Chord progression bar ──────────────────────────────────────────────── */
.aivc-progression-bar {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           8px;
  padding:       10px 0;
  border-top:    1px solid var(--aivc-border);
  border-bottom: 1px solid var(--aivc-border);
  margin-bottom: 24px;
}

.aivc-progression-label {
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--aivc-text-faint);
  white-space:    nowrap;
  flex-shrink:    0;
}

.aivc-progression-chords { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }

.aivc-progression-chord {
  display:       inline-flex;
  align-items:   center;
  padding:       3px 10px;
  font-family:   var(--aivc-chord-font);
  font-size:     0.78rem;
  font-weight:   700;
  color:         var(--aivc-blue);
  border:        1px solid #bfdbfe;
  border-radius: 20px;
  background:    var(--aivc-blue-light);
  white-space:   nowrap;
}

/* ── Song content — 2 columnas en escritorio / 1 en móvil ───────────────── */
.aivc-song-content {
  column-count: 2;
  column-gap:   40px;
}

.aivc-noscript-content {
  font-family: var(--aivc-chord-font);
  font-size:   0.85rem;
  white-space: pre-wrap;
  word-break:  break-word;
  line-height: 1.7;
}

/* ── Sections ───────────────────────────────────────────────────────────── */
.aivc-section {
  break-inside:                avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside:           avoid;
  display:                     inline-block; /* necesario para que break-inside funcione en CSS columns */
  width:                       100%;
  margin-bottom:               28px;
}

.aivc-section-label {
  font-size:      0.7rem !important;
  font-weight:    800 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em;
  color:          var(--aivc-section-color);
  border-bottom:  2px solid var(--aivc-border);
  padding-bottom: 4px;
  margin-bottom:  8px;
}

/* ── Section type styling (verse / chorus / bridge) ─────────────────────── */
.aivc-section[data-type="chorus"] .aivc-lyric {
  font-weight: 700;
}

.aivc-section[data-type="bridge"] .aivc-lyric,
.aivc-section[data-type="prechorus"] .aivc-lyric {
  font-style: italic;
}

/* ── Lines & pairs ──────────────────────────────────────────────────────── */
.aivc-line {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   flex-end;
  margin-bottom: 1px;
  min-height:    calc(1em + 1.6em);
  column-gap:    0;
}

.aivc-line.aivc-lyric-only {
  padding-top: calc(1em * 0.95);
  min-height:  unset;
}

.aivc-pair {
  display:        inline-flex;
  flex-direction: column;
  white-space:    pre;
}

.aivc-chord {
  display:       block;
  font-family:   var(--aivc-chord-font);
  font-size:     0.76rem;
  font-weight:   700;
  color:         var(--aivc-blue);
  min-height:    1em;
  line-height:   1.2;
  white-space:   pre;
  padding-right: 4px; /* gap between consecutive chords */
}

.aivc-lyric {
  display:     block;
  font-size:   0.96rem;
  color:       var(--aivc-text);
  white-space: pre;
  line-height: 1.65;
}

.aivc-empty {
  color:      var(--aivc-text-muted);
  font-style: italic;
  padding:    24px 0;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   SONG FINDER WIDGET
   ══════════════════════════════════════════════════════════════════════════ */

.aivc-finder {
  display:       flex;
  min-height:    75vh;
  border:        1px solid var(--aivc-border);
  border-radius: var(--aivc-radius);
  overflow:      hidden;
  font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:    var(--aivc-bg);
  box-shadow:    0 1px 4px rgba(0,0,0,.06);
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.aivc-finder-sidebar {
  width:          300px;
  flex-shrink:    0;
  border-right:   1px solid var(--aivc-border);
  display:        flex;
  flex-direction: column;
  background:     var(--aivc-surface);
}

.aivc-finder-search {
  padding:       14px 12px 10px;
  border-bottom: 1px solid var(--aivc-border);
  position:      sticky;
  top:           0;
  background:    var(--aivc-surface);
  z-index:       2;
}

.aivc-finder-input {
  width:         100%;
  padding:       9px 12px;
  border:        1px solid var(--aivc-border);
  border-radius: var(--aivc-radius-sm);
  font-size:     0.875rem;
  color:         var(--aivc-text);
  background:    var(--aivc-bg);
  box-sizing:    border-box;
  outline:       none;
  transition:    border-color var(--aivc-transition), box-shadow var(--aivc-transition);
}

.aivc-finder-input:focus {
  border-color: var(--aivc-blue);
  box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}

.aivc-finder-key-filter {
  width:         100%;
  margin-top:    7px;
  padding:       8px 10px;
  border:        1px solid var(--aivc-border);
  border-radius: var(--aivc-radius-sm);
  font-size:     0.82rem;
  color:         var(--aivc-text);
  background:    var(--aivc-bg);
  box-sizing:    border-box;
  cursor:        pointer;
  outline:       none;
}

.aivc-finder-list {
  flex:       1;
  overflow-y: auto;
}

.aivc-finder-item {
  padding:       11px 16px;
  cursor:        pointer;
  border-bottom: 1px solid var(--aivc-border-light);
  border-left:   3px solid transparent;
  transition:    background var(--aivc-transition), border-color var(--aivc-transition);
}

.aivc-finder-item:last-child { border-bottom: none; }

.aivc-finder-item:hover { background: #f0f4ff; }

.aivc-finder-item.is-active {
  background:   var(--aivc-blue-light);
  border-left:  3px solid var(--aivc-blue);
  padding-left: 13px;
}

.aivc-finder-item-title {
  font-weight: 600;
  font-size:   0.875rem;
  color:       var(--aivc-text);
  line-height: 1.3;
}

.aivc-finder-item.is-active .aivc-finder-item-title {
  color: var(--aivc-blue);
}

.aivc-finder-item-meta {
  font-size:  0.72rem;
  color:      var(--aivc-text-muted);
  margin-top: 3px;
  font-family: var(--aivc-chord-font);
}

/* ── Viewer ─────────────────────────────────────────────────────────────── */
.aivc-finder-viewer {
  flex:       1;
  overflow-y: auto;
  padding:    28px 32px;
  min-width:  0;
}

.aivc-finder-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100%;
  min-height:      260px;
  color:           var(--aivc-text-faint);
  text-align:      center;
  padding:         40px 20px;
  gap:             14px;
}

.aivc-finder-empty svg { opacity: .35; }

.aivc-finder-empty p { margin: 0; font-size: 0.9rem; }

.aivc-finder-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  color:           var(--aivc-text-muted);
  padding:         48px;
  font-size:       0.875rem;
}

.aivc-finder-spinner {
  display:       inline-block;
  width:         18px;
  height:        18px;
  border:        2px solid var(--aivc-border);
  border-top:    2px solid var(--aivc-blue);
  border-radius: 50%;
  animation:     aivc-spin .7s linear infinite;
  flex-shrink:   0;
}

@keyframes aivc-spin { to { transform: rotate(360deg); } }

/* Visor dentro del finder */
.aivc-finder-visor { max-width: 100%; }

.aivc-finder-visor .aivc-song-title {
  font-size: 1.6rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .aivc-finder-viewer { padding: 20px; }
  .aivc-finder-sidebar { width: 260px; }
}

@media (max-width: 680px) {
  .aivc-finder {
    flex-direction: column;
    min-height:     auto;
  }

  .aivc-finder-sidebar {
    width:         100%;
    max-height:    280px;
    border-right:  none;
    border-bottom: 1px solid var(--aivc-border);
    flex-shrink:   0;
  }

  .aivc-finder-viewer { padding: 16px; }

  .aivc-song-title { font-size: 1.4rem; }
}

@media (max-width: 768px) {
  .aivc-song-content { column-count: 1; }
}

@media (max-width: 580px) {
  .aivc-controls {
    flex-direction: column;
    align-items:    stretch;
  }

  .aivc-transpose-controls,
  .aivc-action-controls { justify-content: center; }
}

/* ── Single canción — correcciones móvil ─────────────────────────────────── */
@media (max-width: 768px) {

  /* Pastilla transponedor: forzar línea única */
  .single-cancion .aivc-transpose-controls {
    flex-wrap:       nowrap !important;
    justify-content: center;
  }

  /* Todos los hijos de la pastilla: padding y fuente reducidos */
  .single-cancion .aivc-transpose-controls > * {
    padding:   6px 8px;
    font-size: 13px;
  }

  /* Ocultar etiqueta "semitonos" para ganar espacio horizontal */
  .single-cancion .aivc-semitone-label { display: none; }

  /* Asegurar min-width del display central sin texto inferior */
  .single-cancion .aivc-semitone-display { min-width: 32px; }

  /* Toolbar derecho: ancho completo en móvil */
  .single-cancion .toolbar-right-group {
    width:       100%;
    gap:         8px;
    margin-left: 0;
  }

  /* ── Metrónomo móvil: Flexbox + display:contents ────────────────────── */

  /* 1. Contenedor principal fluye naturalmente */
  .toolbar-left-group {
    display:     flex       !important;
    flex-wrap:   wrap       !important;
    align-items: center     !important;
    gap:         8px        !important;
    width:       100%       !important;
  }

  /* 2. Pastilla disuelta: sus hijos participan directamente en el flex */
  .metronomo-pill {
    display: contents !important;
  }

  /* --- FILA 1, ítem 1: Transposición — escudo nowrap --- */
  .aivc-transpose-controls {
    order:       1          !important;
    display:     flex       !important;
    flex-wrap:   nowrap     !important;
  }

  /* --- FILA 1, ítem 2: Toggle metrónomo --- */
  .metro-toggle-btn {
    order:            2               !important;
    flex:             0 0 36px        !important;
    width:            36px            !important;
    height:           36px            !important;
    padding:          0               !important;
    border-radius:    8px             !important;
    border:           2px solid #1a1a1a !important;
    background-color: #ffffff         !important;
    display:          flex            !important;
    align-items:      center          !important;
    justify-content:  center          !important;
  }
  .metronomo-pill.is-playing .metro-toggle-btn {
    background-color: #FB5F6D !important;
    border-color:     #FB5F6D !important;
  }
  .metronomo-pill.is-playing .metro-toggle-btn svg {
    stroke: #ffffff !important;
  }

  /* --- FILA 1, ítem 3: Botón escuchar --- */
  .btn-escuchar-container {
    order:  3 !important;
    margin: 0 !important;
  }

  /* --- FILA 2: Caja roja (flex: 0 0 100% fuerza salto de línea) --- */
  .metronomo-pill.is-playing .metro-expanded-content {
    order:            4           !important;
    flex:             0 0 100%    !important;
    display:          flex        !important;
    flex-direction:   column      !important;
    width:            100%        !important;
    background-color: #FB5F6D    !important;
    padding:          16px        !important;
    border-radius:    8px         !important;
    margin-top:       5px         !important;
    gap:              15px        !important;
    box-sizing:       border-box  !important;
    height:           auto        !important;
  }

  /* Ajustes internos de la caja roja */
  .metro-bpm-row { justify-content: space-between !important; width: 100% !important; }
  .metro-vol-row { width: 100% !important; border-top: 1px solid rgba(255,255,255,0.2) !important; padding-top: 15px !important; margin: 0 !important; }
  #metro-vol     { flex-grow: 1 !important; }

  /* Controles BPM grandes para el dedo */
  .single-cancion .aivc-metro-minus,
  .single-cancion .aivc-metro-plus {
    font-size: 24px     !important;
    padding:   5px 15px !important;
  }
  .single-cancion .aivc-metro-bpm-display {
    font-size:   16px !important;
    font-weight: 700  !important;
  }
  .single-cancion .aivc-metro-stop svg {
    width:  20px !important;
    height: 20px !important;
  }

  /* Slider expandido para táctil */
  .aivc-metro-vol-slider {
    flex-grow: 1    !important;
    height:    6px  !important;
    width:     auto !important;
  }

  /* Botón listen: solo ícono cuadrado, nunca se estira */
  .single-cancion .aivc-btn-listen {
    padding:   7px 11px;
    max-width: fit-content;
    flex:      none;
  }

  /* Wrapper de los dos botones PDF — grid 50/50 irrompible */
  .single-cancion .aivc-pdf-wrapper {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   10px !important;
    width:                 100% !important;
    align-items:           center;
  }

  .single-cancion .aivc-pdf-wrapper .aivc-btn {
    width:           100% !important;
    margin:          0 !important;
    padding:         12px 4px !important;
    font-size:       11px !important;
    display:         flex !important;
    justify-content: center !important;
    align-items:     center !important;
    box-sizing:      border-box !important;
  }

  .single-cancion .aivc-pdf-wrapper .aivc-btn svg {
    width:  11px;
    height: 11px;
    flex-shrink: 0;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   SONG GRID FINDER  [buscador_canciones]  v2.0
   ══════════════════════════════════════════════════════════════════════════ */

.aivc-grid-finder {
  font-family: 'Montserrat', sans-serif;
  color:        var(--aivc-text);
}

/* ── Barra de búsqueda ───────────────────────────────────────────────────── */
.aivc-search-bar {
  max-width:     700px;
  margin:        0 auto 20px auto;
}

.aivc-search-input {
  width:          100%;
  padding:        15px 20px;
  border:         2px solid #000000 !important;
  border-radius:  8px;
  background:     #ffffff;
  font-family:    'Montserrat', sans-serif;
  font-size:      16px;
  font-weight:    500;
  color:          #111111;
  box-sizing:     border-box;
  outline:        none;
  transition:     border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}

.aivc-search-input::placeholder {
  color:       #999999;
  font-weight: 400;
}

.aivc-search-input:focus {
  border-color: var(--aivc-coral);
  box-shadow:   0 0 0 3px rgba(251, 95, 109, 0.12);
}

/* ── Filtro A-Z ──────────────────────────────────────────────────────────── */
.aivc-alpha-filter {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             6px;
  margin-bottom:   40px;
}

.aivc-alpha-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           35px;
  height:          35px;
  padding:         0;
  border:          1px solid #dddddd;
  border-radius:   4px;
  background:      transparent;
  font-family:     'Montserrat', sans-serif;
  font-size:       0.75rem;
  font-weight:     700;
  color:           #333333;
  cursor:          pointer;
  transition:      all 0.2s ease;
  line-height:     1;
  user-select:     none;
  -webkit-user-select: none;
}

/* Botón "TODAS" un poco más ancho */
.aivc-alpha-btn[data-letter="TODAS"] {
  width:       auto;
  padding:     0 10px;
  font-size:   0.68rem;
  letter-spacing: .04em;
}

.aivc-alpha-btn:hover {
  background:      var(--aivc-coral);
  border-color:    var(--aivc-coral);
  color:           #ffffff;
  transform:       scale(1.1);
}

.aivc-alpha-btn.active {
  background:      var(--aivc-coral);
  border-color:    var(--aivc-coral);
  color:           #ffffff;
  transform:       scale(1.1);
}

/* ── Jerarquía alfabética ────────────────────────────────────────────────── */
.aivc-letter-group { width: 100%; }
.aivc-letter-group.aivc-hidden { display: none; }

.aivc-letra-jerarquia {
  font-family:    'Montserrat', sans-serif;
  font-size:      3rem;
  font-weight:    900;
  color:          #000000;
  text-transform: uppercase;
  border-bottom:  2px solid #000000;
  margin:         40px 0 20px 0;
  width:          100%;
  line-height:    1;
  padding-bottom: 8px;
}

/* ── Song cards grid ─────────────────────────────────────────────────────── */
.aivc-grid-songs {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   20px;
}

.aivc-song-card {
  display:                    flex;
  align-items:                center;
  padding:                    10px 18px;
  border:                     2px solid #000000;
  border-radius:              12px;
  background-color:           transparent;
  text-decoration:            none !important;
  cursor:                     pointer;
  transition:                 all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.aivc-song-card:hover,
.aivc-song-card:active {
  transform:    scale(1.03);
  border-color: #000000;
}

.aivc-song-card:active .aivc-card-title,
.aivc-song-card:hover .aivc-card-title {
  color: #FB5F6D !important;
}

.aivc-card-title {
  font-family:    'Montserrat', sans-serif;
  font-weight:    800;
  font-size:      clamp(14px, 1.5vw, 16px);
  color:          #000000;
  text-transform: uppercase;
  margin:         0;
  line-height:    1.2;
  transition:     color 0.3s ease;
}

.aivc-song-card:hover .aivc-card-title {
  color: #FB5F6D !important;
}

/* ── Hidden / no-results states ─────────────────────────────────────────── */
.aivc-song-card.aivc-hidden { display: none; }

.aivc-grid-no-results {
  text-align:  center;
  padding:     48px 20px;
  color:       var(--aivc-text-faint);
  font-size:   0.9rem;
}

.aivc-grid-empty {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             14px;
  padding:         60px 20px;
  color:           var(--aivc-text-faint);
  text-align:      center;
}

.aivc-grid-empty svg { opacity: .35; }
.aivc-grid-empty p   { margin: 0; font-size: 0.9rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .aivc-grid-songs { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  .aivc-grid-songs { grid-template-columns: repeat(2, 1fr); }
  .aivc-grid-toolbar { flex-direction: column; align-items: stretch; }
  .aivc-grid-count   { text-align: left; }
}

@media (max-width: 400px) {
  .aivc-grid-songs { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SINGLE CANCION PAGE — AIVC Light Theme
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper 900 px centrado (envuelve back-btn + visor) ────────────────── */
.aivc-single-wrapper {
  max-width:  900px;
  margin:     0 auto;
  padding:    30px 24px 56px;
}

@media (max-width: 768px) {
  .aivc-single-wrapper { padding-top: 20px; }
}

/* ── Botón "Todas las canciones" ────────────────────────────────────────── */
.aivc-back-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-family:     'Montserrat', sans-serif;
  font-size:       0.78rem;
  font-weight:     700;
  color:           #555555;
  text-decoration: none;
  text-transform:  uppercase;
  letter-spacing:  .06em;
  margin-bottom:   22px;
  transition:      color 0.15s;
}
.aivc-back-btn:hover { color: #111111; }
.aivc-back-btn svg   { flex-shrink: 0; }

/* ── Visor: reset a fondo transparente sobre fondo de página claro ──────── */
.single-cancion .aivc-visor {
  background: transparent;
  color:      #333333;
  padding:    0;
  max-width:  100%;
}

/* Título — Poppins, elegante y compacto */
.single-cancion .aivc-song-title {
  font-family:    'Poppins', 'Montserrat', sans-serif;
  color:          #111111;
  font-size:      1.9rem;
  letter-spacing: -0.02em;
}

/* Subtítulo e intérprete */
.single-cancion .aivc-song-subtitle { color: #6b7280; }
.single-cancion .aivc-song-artist   { color: #6b7280; }

/* Meta badges */
.single-cancion .aivc-meta-label { color: #9ca3af; }
.single-cancion .aivc-meta-value { color: #333333; }
.single-cancion .aivc-key-badge .aivc-meta-value {
  color:      #1e40af; /* navy para el tono */
  font-family: var(--aivc-chord-font);
}

/* Barra de controles — borde izquierdo coral (acento de marca) */
.single-cancion .aivc-controls {
  background:    #ffffff;
  border:        1px solid var(--aivc-gray-light);
  border-left:   4px solid var(--aivc-coral);
  border-radius: 0 8px 8px 0;
  align-items:   stretch;
}

/* ── Contenedor maestro ─────────────────────────────────────────────────────
   flex-wrap deja que los grupos bajen solos si no hay espacio.
   margin-left: auto en el grupo derecho lo ancla a la derecha siempre.
   ─────────────────────────────────────────────────────────────────────────── */
.toolbar-master-container {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         12px;
  width:       100%;
}

/* Grupo izquierdo: transponedor + pastilla metrónomo + escuchar */
.toolbar-left-group {
  display:     flex;
  align-items: center;
  gap:         15px;
}

/* Pastilla metrónomo: toggle + contenido expandido en fila */
.metronomo-pill {
  display:     flex;
  align-items: center;
  gap:         10px;
}

/* Contenido expandido: oculto por defecto */
.metro-expanded-content {
  display:         none;
  flex-direction:  row;
  align-items:     center;
  --aivc-beat-dur: 0.5s;
}

/* Visible cuando la pastilla está activa (escritorio) */
.metronomo-pill.is-playing .metro-expanded-content {
  display:          flex;
  background-color: #FB5F6D;
  border-radius:    8px;
  padding:          0 12px;
  height:           36px;
  gap:              4px;
  color:            #ffffff;
  animation:        aivc-metro-pulse var(--aivc-beat-dur) ease-out infinite;
}

.single-cancion .toolbar-master-container {
  gap:   12px;
  width: 100%;
}

.single-cancion .toolbar-right-group {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-left: auto;
}

/* Botones genéricos (reset base) */
.single-cancion .aivc-btn {
  background:   #ffffff;
  border-color: #d1d5db;
  color:        #374151;
}
.single-cancion .aivc-btn:hover:not(:disabled) {
  background:   #f3f4f6;
  border-color: #9ca3af;
}

/* ── Transponedor: pastilla unida (técnica margen negativo) ─────────────── */

/* Contenedor padre: flex + stretch para igualar alturas */
.single-cancion .aivc-transpose-controls {
  display:     flex;
  align-items: stretch;
  gap:         0;
}

/* Regla universal para los 4 hijos directos (botones, divs, spans por igual) */
.single-cancion .aivc-transpose-controls > * {
  border:           2px solid #000000;
  margin-left:      -2px;
  background-color: transparent;
  color:            #000000;
  border-radius:    0;
  transition:       background 0.2s ease;
}

/* Primer elemento: sin margen negativo + redondeado izquierdo */
.single-cancion .aivc-transpose-controls > *:first-child {
  margin-left:   0;
  border-radius: 20px 0 0 20px;
}

/* Elementos del medio: forzar cuadrado */
.single-cancion .aivc-transpose-controls > *:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* Último elemento: redondeado derecho */
.single-cancion .aivc-transpose-controls > *:last-child {
  border-radius: 0 20px 20px 0;
}

/* Hover: elevar z-index para que el borde resalte sobre el vecino */
.single-cancion .aivc-transpose-controls > *:hover:not(:disabled) {
  background-color: #f0f0f0;
  color:            #000000;
  transform:        none;
  position:         relative;
  z-index:          1;
}

/* Display de semitonos */
.single-cancion .aivc-semitone-count           { color: #000000; }
.single-cancion .aivc-semitone-count.is-active { color: #000000; font-weight: 800; }
.single-cancion .aivc-semitone-label           { font-size: 9px; color: #555555; }

/* Reset */
.single-cancion .aivc-btn-reset { color: #333333; font-size: 1.1rem; }

/* NNS button — inactivo */
.single-cancion .aivc-btn-nns {
  font-family:    'Montserrat', sans-serif;
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: .05em;
}

/* NNS activo — fondo negro / texto blanco */
.single-cancion .aivc-btn-nns.nns-active {
  background-color: #000000 !important;
  color:            #ffffff !important;
}

.single-cancion .aivc-btn-nns.nns-active:hover:not(:disabled) {
  background-color: #333333 !important;
  color:            #ffffff !important;
}

/* Botones de descarga PDF — estilos compartidos */
.single-cancion .aivc-btn-dl-chords,
.single-cancion .aivc-btn-pdf,
.single-cancion .aivc-btn-dl-lyrics {
  padding:         8px 16px;
  font-family:     'Montserrat', sans-serif;
  font-weight:     700;
  font-size:       13px;
  text-transform:  uppercase;
  letter-spacing:  .04em;
  border-radius:   6px;
  transition:      all 0.3s ease;
}

/* Botón "Con Acordes" — fondo negro */
.single-cancion .aivc-btn-dl-chords,
.single-cancion .aivc-btn-pdf {
  background-color: #000000;
  border:           2px solid #000000;
  color:            #ffffff;
}
.single-cancion .aivc-btn-dl-chords:hover:not(:disabled),
.single-cancion .aivc-btn-pdf:hover:not(:disabled) {
  background-color: #FB5F6D;
  border-color:     #FB5F6D;
  color:            #ffffff;
  transform:        scale(1.05);
}

/* Botón "Solo Letra" — outline negro */
.single-cancion .aivc-btn-dl-lyrics {
  background-color: transparent;
  border:           2px solid #000000;
  color:            #000000;
}
.single-cancion .aivc-btn-dl-lyrics:hover:not(:disabled) {
  background-color: #FB5F6D;
  border-color:     #FB5F6D;
  color:            #ffffff;
  transform:        scale(1.05);
}

/* Barra de progresión armónica */
.single-cancion .aivc-progression-bar   { border-color: #e5e7eb; }
.single-cancion .aivc-progression-chord {
  color:        #1e40af;
  background:   #eff6ff;
  border-color: #bfdbfe;
}

/* Etiquetas de sección (VERSO, CORO…) — gris oscuro, Montserrat */
.single-cancion .aivc-section-label {
  font-family:    'Montserrat', sans-serif;
  font-weight:    800;
  text-transform: uppercase;
  color:          #222222;
  border-color:   #e5e7eb;
  opacity:        1;
}

/* Acordes — azul navy */
.single-cancion .aivc-chord { color: var(--aivc-navy); }

/* Letra — Montserrat (identidad de marca) */
.single-cancion .aivc-lyric {
  font-family: 'Montserrat', sans-serif;
  font-size:   0.96rem;
  line-height: 1.7;
  color:       #222222;
}

/* ── Píldora dinámica del Metrónomo ─────────────────────────────────────── */
@keyframes aivc-metro-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(251, 95, 109, 0.6); }
  65%  { box-shadow: 0 0 0 10px rgba(251, 95, 109, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(251, 95, 109, 0);   }
}

/* Botones internos (−, +, stop) */
.single-cancion .aivc-metro-minus,
.single-cancion .aivc-metro-plus,
.single-cancion .aivc-metro-stop {
  background:      transparent;
  border:          none;
  color:           inherit;
  cursor:          pointer;
  padding:         6px 11px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-family:     'Montserrat', sans-serif;
  font-weight:     700;
  font-size:       14px;
  line-height:     1;
  transition:      background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.single-cancion .aivc-metro-minus:hover,
.single-cancion .aivc-metro-plus:hover,
.single-cancion .aivc-metro-stop:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Toggle standalone: cuadrado 36px */
.metro-toggle-btn {
  height:           36px              !important;
  width:            36px              !important;
  padding:          0                 !important;
  margin:           0                 !important;
  box-sizing:       border-box        !important;
  background-color: transparent       !important;
  border:           2px solid #000000  !important;
  border-radius:    8px               !important;
  outline:          none;
  color:            #000000           !important;
  cursor:           pointer           !important;
  display:          flex              !important;
  justify-content:  center            !important;
  align-items:      center            !important;
  flex-shrink:      0                 !important;
  line-height:      1;
  transition:       all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  -webkit-tap-highlight-color: transparent;
}
.metro-toggle-btn svg {
  width:       20px;
  height:      20px;
  flex-shrink: 0;
}

/* Toggle activo: fondo coral, ícono blanco */
.metro-toggle-btn.is-playing {
  background-color: #FB5F6D !important;
  border-color:     #FB5F6D !important;
  color:            #ffffff  !important;
}
.metro-toggle-btn.is-playing svg {
  stroke: #ffffff !important;
}

/* Hover solo en dispositivos con cursor real (evita hover pegado en táctil) */
@media (hover: hover) and (pointer: fine) {
  .metro-toggle-btn:hover {
    background-color: #FB5F6D !important;
    color:            #ffffff  !important;
    border-color:     #FB5F6D  !important;
    transform:        scale(1.1) !important;
    box-shadow:       0 4px 10px rgba(251, 95, 109, 0.4) !important;
  }
}

/* Contenido expandido: oculto por defecto (también via inline style en HTML) */
.metro-expanded-content {
  --aivc-beat-dur: 0.5s;
  gap:             4px;
}

/* Fila BPM (− / display / + / stop) */
.metro-bpm-row {
  display:     flex;
  align-items: center;
  gap:         0;
}

/* Display BPM — separadores visuales */
.single-cancion .aivc-metro-bpm-display {
  white-space:  nowrap;
  font-family:  'Montserrat', sans-serif;
  font-weight:  700;
  font-size:    12px;
  padding:      0 10px;
  border-left:  1px solid rgba(255, 255, 255, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  color:        inherit;
  line-height:  1;
}

/* Fila de volumen: en línea con BPM en escritorio */
.metro-vol-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  border-top:  none;
  padding-top: 0;
  width:       auto;
  margin-left: 10px;
}
.single-cancion .aivc-vol-icon-wrap {
  display:     inline-flex;
  align-items: center;
  color:       #ffffff;
  transition:  color 0.2s ease;
  flex-shrink: 0;
  cursor:      pointer;
}
/* Mostrar solo el ícono correcto */
.single-cancion .aivc-vol-off { display: none; }
.single-cancion .aivc-vol-icon-wrap.is-muted .aivc-vol-on  { display: none; }
.single-cancion .aivc-vol-icon-wrap.is-muted .aivc-vol-off { display: block; color: rgba(255,255,255,0.45); }

.single-cancion .aivc-metro-vol-slider {
  width:        60px;
  height:       3px;
  accent-color: #ffffff;
  cursor:       pointer;
  padding:      0;
  margin:       0;
  border:       none;
  background:   transparent;
  flex-shrink:  0;
}
.single-cancion .aivc-vol-pct {
  color:                #ffffff;
  font-family:          'Montserrat', sans-serif;
  font-size:            11px;
  font-weight:          600;
  font-variant-numeric: tabular-nums;
  min-width:            3ch;
  text-align:           right;
  white-space:          nowrap;
}

/* ── Botón "Escuchar" (ícono cuadrado, sin texto) ───────────────────────── */
.single-cancion .aivc-btn-listen {
  padding:          7px 12px;
  border-radius:    6px;
  transition:       all 0.3s ease;
  background-color: #FB5F6D;
  border:           2px solid #FB5F6D;
  color:            #ffffff;
  cursor:           pointer;
  -webkit-tap-highlight-color: transparent;
  display:          inline-flex;
  align-items:      center;
  gap:              6px;
}
.single-cancion .aivc-btn-listen:hover:not(:disabled),
.single-cancion .aivc-btn-listen.is-open {
  background-color: #000000;
  border-color:     #000000;
  color:            #ffffff;
  transform:        scale(1.05);
}
.single-cancion .aivc-toggle-wrapper {
  border-left:  1px solid rgba(255, 255, 255, 0.4);
  padding-left: 10px;
  display:      flex;
  align-items:  center;
}
.single-cancion .aivc-toggle-icon {
  display:    inline-flex;
  align-items: center;
  transition: transform 0.3s ease;
}
.single-cancion .aivc-btn-listen.is-open .aivc-toggle-icon {
  transform: rotate(180deg);
}

/* ── Contenedor del reproductor inline ─────────────────────────────────── */
.single-cancion .aivc-media-player {
  overflow:      hidden;
  max-height:    0;
  opacity:       0;
  margin-bottom: 0;
  padding-top:   0;
  transition:    max-height 0.4s ease-out, opacity 0.4s ease-out,
                 margin-bottom 0.4s ease-out, padding-top 0.4s ease-out;
}
.single-cancion .aivc-media-player.is-open {
  max-height:    600px;
  opacity:       1;
  margin-bottom: 30px;
  padding-top:   15px;
}

/* YouTube embed */
.single-cancion .aivc-media-player .aivc-player-youtube {
  display:       block;
  width:         100%;
  max-width:     500px;
  height:        280px;
  margin:        16px auto 0;
  border:        none;
  border-radius: 8px;
}

/* Spotify embed compacto */
.single-cancion .aivc-media-player .aivc-player-spotify {
  display:       block;
  width:         100%;
  height:        152px;
  margin-top:    16px;
  border:        none;
  border-radius: 12px;
}

@media (max-width: 768px) {
  .single-cancion .aivc-btn-listen { flex: 1; padding: 8px 10px; font-size: 10px; }
  .single-cancion .aivc-media-player .aivc-player-youtube { height: 200px; }
}

/* ── Toast: aviso volumen móvil (iOS / Android) ─────────────────────────── */
.aivc-mobile-toast {
  position:         fixed;
  top:              -100px;
  left:             50%;
  transform:        translateX(-50%);
  background-color: #333333;
  color:            #ffffff;
  padding:          12px 20px;
  border-radius:    8px;
  font-family:      'Montserrat', sans-serif;
  font-size:        12px;
  text-align:       center;
  box-shadow:       0 4px 15px rgba(0, 0, 0, 0.2);
  z-index:          9999;
  transition:       top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                    opacity 0.4s ease;
  opacity:          0;
  width:            90%;
  max-width:        350px;
  pointer-events:   none;
}
.aivc-mobile-toast.show {
  top:     20px;
  opacity: 1;
}

/* El CSS de impresión se inyecta dinámicamente por JS (handleNativePrint) */
#aivc-print-mount { display: none; }

/* ── Botón DESCARGAR PDF (toolbar) ──────────────────────────────────────── */
.aivc-print-trigger-btn {
  background-color: #1a1a1a !important;
  color:            #ffffff !important;
  border:           none !important;
  border-radius:    8px !important;
  height:           36px !important;
  padding:          0 16px !important;
  display:          flex !important;
  align-items:      center !important;
  gap:              8px !important;
  font-family:      'Montserrat', sans-serif !important;
  font-weight:      700 !important;
  font-size:        12px !important;
  cursor:           pointer !important;
  transition:       all 0.3s ease !important;
  will-change:      transform;
  white-space:      nowrap !important;
}
.aivc-print-trigger-btn:hover {
  background-color: #FB5F6D !important;
  color:            #ffffff !important;
  transform:        scale(1.05) !important;
}

/* ── Controles inline React (#aivc-main-controls-root) ─────────────────── */
.aivc-inline-controls {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

/* Wrapper del botón Aa + dropdown (necesita position:relative) */
.aivc-font-trigger-wrap { position: relative; }

/* Botón modo oscuro */
.aivc-dark-mode-btn {
  width:           36px;
  height:          36px;
  border:          2px solid #1a1a1a;
  border-radius:   8px;
  background:      #ffffff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  color:           #1a1a1a;
  transition:      background 0.15s ease, border-color 0.15s ease;
  flex-shrink:     0;
}
.aivc-dark-mode-btn:hover        { background: #f5f5f5; }
.aivc-dark-mode-btn.is-active    { background: #1a1a1a; color: #ffffff; }
.aivc-dark-mode-btn.is-active:hover { background: #333; }

/* Botón disparador "A a" */
.aivc-font-trigger-btn {
  width:           36px;
  height:          36px;
  border:          2px solid #1a1a1a;
  border-radius:   8px;
  background:      #ffffff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  color:           #1a1a1a;
  font-family:     'Montserrat', sans-serif;
  font-weight:     700;
  font-size:       16px;
  gap:             0;
  transition:      background 0.15s ease, border-color 0.15s ease;
  flex-shrink:     0;
  line-height:     1;
}
.aivc-font-trigger-btn:hover  { background: #f5f5f5; }
.aivc-font-trigger-small {
  font-size:   11px;
  margin-left: 1px;
  line-height: 1;
}

/* Panel abatible de tamaño de letra */
.aivc-font-panel {
  position:      absolute;
  top:           calc(100% + 8px);
  right:         0;
  background:    #ffffff;
  border:        2px solid #1a1a1a;
  border-radius: 8px;
  display:       flex;
  align-items:   center;
  box-shadow:    0 4px 12px rgba(0,0,0,0.1);
  z-index:       100;
  overflow:      hidden;
}

/* Botones +/- del stepper */
.aivc-stepper-btn {
  background:      none;
  border:          none;
  cursor:          pointer;
  font-size:       16px;
  font-weight:     700;
  color:           #1a1a1a;
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background 0.15s ease;
  line-height:     1;
  flex-shrink:     0;
}
.aivc-stepper-btn:hover { background: #f0f0f0; }

/* Valor numérico del stepper */
.aivc-stepper-val {
  font-family:     'Montserrat', sans-serif;
  font-size:       12px;
  font-weight:     700;
  color:           #1a1a1a;
  min-width:       48px;
  text-align:      center;
  border-left:     1px solid #e0e0e0;
  border-right:    1px solid #e0e0e0;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Efectos de Hover y Grow para controles React en Modo Claro */
#aivc-main-controls-root button {
    transition: all 0.3s ease !important;
}
#aivc-main-controls-root button:hover {
    background-color: #FB5F6D !important;
    border-color:     #FB5F6D !important;
    color:            #ffffff !important;
    transform:        scale(1.05) !important;
}
#aivc-main-controls-root button:hover svg {
    stroke: #ffffff !important;
    fill:   none    !important;
}

/* =========================================
   AJUSTES MÓVILES (Solo pantallas pequeñas)
   ========================================= */
@media (max-width: 768px) {

    #aivc-app-wrapper .toolbar-left-group {
        display:     flex;
        flex-wrap:   wrap;
        gap:         8px;
        align-items: center;
    }

    /* 1. Transponedor full width, más cuerpo y pequeño espacio debajo */
    #aivc-app-wrapper .aivc-transpose-controls {
        order:         1;
        display:       flex;
        flex:          0 0 100%;
        margin-bottom: 6px !important;
    }
    #aivc-app-wrapper .aivc-transpose-controls > * {
        flex:           1;
        justify-content: center;
        padding-top:    10px !important;
        padding-bottom: 10px !important;
    }

    /* 2. Metrónomo, Play y PDF obligados en la misma línea (Línea 2) */
    #aivc-app-wrapper .metronomo-pill {
        order: 2;
        flex:  0 0 auto;
    }
    #aivc-app-wrapper .btn-escuchar-container {
        order:       3;
        flex:        0 0 auto;
        margin-left: 0 !important;
    }
    #aivc-app-wrapper #aivc-download-pdf-btn {
        order:           4;
        flex:            1 1 0%;
        min-width:       0;
        width:           auto !important;
        margin-top:      0 !important;
        margin-left:     0 !important;
        padding:         0 8px !important;
        font-size:       11px !important;
        display:         flex;
        justify-content: center;
        align-items:     center;
        white-space:     nowrap;
        overflow:        hidden;
        text-overflow:   ellipsis;
    }

    /* 3. Botones Modo/Letra/Ojo ARRIBA de la lista de acordes */
    #aivc-app-wrapper .aivc-progression-bar {
        display:     flex;
        flex-wrap:   wrap;
        align-items: center;
    }
    #aivc-app-wrapper #aivc-main-controls-root {
        order:           1;
        width:           100%;
        display:         flex;
        justify-content: flex-end;
        margin-bottom:   12px;
    }
    #aivc-app-wrapper .aivc-progression-label {
        order: 2;
        width: auto;
    }
    #aivc-app-wrapper .aivc-progression-chords {
        order:      3;
        width:      auto;
        margin-top: 0 !important;
    }
}

/* =========================================
   AJUSTES ESCRITORIO (Pantallas grandes)
   ========================================= */
@media (min-width: 769px) {
    #aivc-app-wrapper .toolbar-left-group {
        display:     flex !important;
        flex-wrap:   wrap !important;
        width:       100% !important;
        align-items: center;
        row-gap:     15px !important;
    }

    #aivc-app-wrapper #aivc-download-pdf-btn {
        margin-left: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
 * PDF BUILDER — Vista de previsualización e impresión
 * ═══════════════════════════════════════════════════════════════════ */

body.aivc-is-pdf-view #masthead,
body.aivc-is-pdf-view #colophon,
body.aivc-is-pdf-view .site-header,
body.aivc-is-pdf-view .site-footer,
body.aivc-is-pdf-view nav.main-navigation,
body.aivc-is-pdf-view .elementor-section { display: none !important; }

body.aivc-is-pdf-view {
    margin:     0;
    padding:    0;
    overflow:   hidden;
    background: #525659;
}

.aivc-pdf-builder-layout {
    position:    fixed;
    top: 0; left: 0;
    width:       100vw;
    height:      100vh;
    z-index:     99999;
    display:     flex;
    background:  #525659;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* ── Panel izquierdo: papel A4 ── */
.aivc-pdf-preview-container {
    flex:            1;
    overflow-y:      auto;
    display:         flex;
    justify-content: center;
    padding:         30px 20px;
}

.aivc-pdf-paper {
    position:       relative;
    background:     #ffffff;
    width:          210mm;
    min-height:     297mm;
    padding:        20mm 22mm;
    box-shadow:     0 4px 24px rgba(0,0,0,0.4);
    color:          #111111;
    font-family:    'Helvetica Neue', Arial, sans-serif;
    align-self:     flex-start;
    box-sizing:     border-box;
    display:        flex !important;
    flex-direction: column !important;
}

/* (1) Título — Poppins/Montserrat 900 */
.aivc-pdf-paper h1,
.aivc-pdf-paper .aivc-song-title,
.aivc-pdf-title {
    font-family:    'Poppins', 'Montserrat', sans-serif !important;
    font-weight:    900 !important;
    color:          #111111 !important;
    font-size:      30px !important;
    margin-bottom:  5px !important;
    letter-spacing: 0.5px;
    margin-top:     0;
}

/* (2) Marca de agua */
.aivc-pdf-watermark {
    position: absolute;
    top:      40px;
    right:    40px;
    width:    60px;
    opacity:  0.35;
    pointer-events: none;
}
.aivc-pdf-watermark img { width: 100%; display: block; }

.aivc-pdf-subtitle {
    font-size:   13pt;
    font-weight: 600;
    color:       #2c2c2c;
    margin:      0 0 4px;
}

.aivc-pdf-artist {
    font-size:  12pt;
    font-style: italic;
    color:      #4b4b4b;
    margin:     0 0 6px;
}

.aivc-pdf-meta-row {
    font-size: 11pt;
    color:     #4b4b4b;
    margin:    0;
}

.aivc-pdf-paper-divider {
    border:     none;
    border-top: 1px solid #aaaaaa;
    margin:     10px 0 16px;
}

.aivc-pdf-paper-content {
    line-height: 1.7;
    color:       #111111;
    flex-grow:   1 !important;
    /* font-size controlled dynamically by JS via pdfFontStyleTag */
}

.aivc-pdf-paper-content.aivc-two-columns {
    column-count: 2;
    column-gap:   30px;
}

.aivc-pdf-paper-content .aivc-section {
    break-inside:  avoid;
    margin-bottom: 12px;
}

/* (3) Ocultar acordes en el papel */
.aivc-pdf-paper.hide-chords .aivc-chord,
.aivc-pdf-paper.hide-chords .aivc-progression-chord { display: none !important; }

/* (4) Acordes en negro para el PDF */
.aivc-pdf-paper .aivc-chord,
.aivc-pdf-paper .aivc-progression-chord {
    color:       #000000 !important;
    font-weight: 700 !important;
}

/* ── Sidebar derecho ── */
.aivc-pdf-sidebar {
    width:          220px;
    min-width:      220px;
    background:     #1e1e1e;
    color:          #e0e0e0;
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
    box-shadow:     -4px 0 12px rgba(0,0,0,0.3);
}

.aivc-pdf-sidebar-brand {
    padding:       18px 16px 14px;
    border-bottom: 1px solid #333333;
}

.aivc-pdf-sidebar-logo {
    display:        block;
    font-size:      10px;
    font-weight:    700;
    color:          #FB5F6D;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom:  2px;
}

.aivc-pdf-sidebar-label {
    font-size:   13px;
    font-weight: 600;
    color:       #e0e0e0;
}

.aivc-pdf-sidebar-section {
    padding:        14px 16px;
    border-bottom:  1px solid #2a2a2a;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.aivc-pdf-sidebar-heading {
    display:        block;
    font-size:      10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color:          #888888;
    font-weight:    600;
}

/* Base de todos los botones del sidebar */
.aivc-pdf-sidebar-btn {
    background:    #2a2a2a;
    color:         #e0e0e0;
    border:        1px solid #3a3a3a;
    border-radius: 6px;
    padding:       9px 12px;
    font-size:     13px;
    cursor:        pointer;
    text-align:    left;
    transition:    background 0.2s, border-color 0.2s, color 0.2s;
    display:       flex;
    align-items:   center;
    gap:           8px;
    width:         100%;
    font-family:   inherit;
    box-sizing:    border-box;
}

.aivc-pdf-sidebar-btn:hover {
    background:   #333333;
    border-color: #555555;
    color:        #ffffff;
}

.aivc-pdf-sidebar-btn.is-active {
    border-color: #FB5F6D;
    color:        #FB5F6D;
}

/* (3) Toggle switch acordes */
.aivc-pdf-control-group {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         4px 0;
}

.aivc-pdf-control-label {
    font-size: 13px;
    color:     #e0e0e0;
}

.aivc-toggle-switch {
    position: relative;
    display:  inline-block;
    width:    44px;
    height:   24px;
    flex-shrink: 0;
}
.aivc-toggle-switch input { opacity: 0; width: 0; height: 0; }

.aivc-slider {
    position:         absolute;
    cursor:           pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #444444;
    transition:       .3s;
    border-radius:    24px;
}
.aivc-slider:before {
    position:         absolute;
    content:          "";
    height:           18px;
    width:            18px;
    left:             3px;
    bottom:           3px;
    background-color: #ffffff;
    transition:       .3s;
    border-radius:    50%;
}
.aivc-toggle-switch input:checked + .aivc-slider            { background-color: #FB5F6D; }
.aivc-toggle-switch input:checked + .aivc-slider:before     { transform: translateX(20px); }

/* Font row */
.aivc-pdf-font-row {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.aivc-pdf-font-row .aivc-pdf-sidebar-btn {
    flex:            1;
    justify-content: center;
    padding:         8px;
}

.aivc-pdf-font-display {
    background:    #2a2a2a;
    border:        1px solid #444;
    border-radius: 4px;
    padding:       6px 8px;
    font-size:     12px;
    color:         #e0e0e0;
    text-align:    center;
    min-width:     42px;
}

/* (5a) Botón Descargar PDF — negro sólido, borde blanco, hover salmón */
.aivc-pdf-btn-download {
    background:       #181818 !important;
    background-color: #181818 !important;
    color:            #ffffff !important;
    border:           1px solid #ffffff !important;
    border-radius:    8px !important;
    padding:          12px 20px !important;
    font-family:      'Poppins', 'Montserrat', sans-serif !important;
    font-weight:      600 !important;
    font-size:        14px !important;
    text-transform:   uppercase !important;
    justify-content:  center !important;
    transition:       all 0.3s ease !important;
}
.aivc-pdf-btn-download:hover {
    background:       #FB5F6D !important;
    background-color: #FB5F6D !important;
    border-color:     #FB5F6D !important;
    color:            #ffffff !important;
}
.aivc-pdf-btn-download:hover svg { stroke: #ffffff !important; }

/* (5b) Botón Imprimir — outline salmón, hover fill */
.aivc-pdf-btn-print {
    background:       transparent !important;
    background-color: transparent !important;
    color:            #FB5F6D !important;
    border:           2px solid #FB5F6D !important;
    border-radius:    8px !important;
    padding:          12px 20px !important;
    font-family:      'Poppins', 'Montserrat', sans-serif !important;
    font-weight:      600 !important;
    font-size:        14px !important;
    justify-content:  center !important;
    transition:       all 0.3s ease !important;
}
.aivc-pdf-btn-print:hover {
    background:       #FB5F6D !important;
    background-color: #FB5F6D !important;
    color:            #ffffff !important;
}

/* =========================================
   LIMPIEZA PARA EXPORTACIÓN INSTANTÁNEA PDF
   ========================================= */
.aivc-pdf-paper.is-exporting-pdf {
    min-height:     0 !important;
    height:         max-content !important;
    box-shadow:     none !important;
    margin:         0 !important;
    padding-bottom: 0 !important;
}

.aivc-pdf-paper.is-exporting-pdf > *:last-child,
.aivc-pdf-paper.is-exporting-pdf .aivc-song-content > *:last-child {
    margin-bottom:  0 !important;
    padding-bottom: 0 !important;
}

/* Pie de página del PDF */
.aivc-pdf-footer {
    margin-top:      auto !important;
    padding-top:     15px !important;
    border-top:      1px solid #e0e0e0 !important;
    font-size:       11px !important;
    color:           #888888 !important;
    font-family:     'Poppins', 'Montserrat', sans-serif !important;
    width:           100% !important;
    display:         flex !important;
    justify-content: center !important;
    align-items:     center !important;
    gap:             6px !important;
    clear:           both !important;
}

.aivc-footer-logo {
    height:  14px !important;
    width:   auto !important;
    opacity: 0.6 !important;
}

/* Reducir margen durante exportación para evitar hoja extra */
.aivc-pdf-paper.is-exporting-pdf .aivc-pdf-footer {
    margin-top:     15px !important;
    padding-bottom: 0 !important;
    margin-bottom:  0 !important;
}

/* =========================================
   AJUSTES MÓVILES — PDF BUILDER
   ========================================= */
/* ── Botón Aa solo visible en móvil ── */
.pdf-btn-mobile-aa {
    display:         none;
    background:      #333333;
    color:           #e0e0e0;
    border:          none;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    justify-content: center;
    align-items:     center;
    cursor:          pointer;
    transition:      background 0.2s;
}
.pdf-btn-mobile-aa:hover,
.pdf-btn-mobile-aa.is-active { background: #FB5F6D; }

/* ── Desktop: controles de fuente siempre visibles ── */
@media (min-width: 769px) {
    .pdf-btn-mobile-aa { display: none !important; }
    .pdf-font-controls { display: flex !important; }
}

/* ── Móvil: Bottom App Bar ── */
@media (max-width: 768px) {
    /* Layout general */
    .aivc-pdf-builder-layout {
        flex-direction: column !important;
        padding:        0 !important;
        padding-bottom: 0 !important;
    }

    /* Contenedor: ventana de navegación con scroll libre */
    .aivc-pdf-preview-container {
        display:                    block !important;
        width:                      100vw !important;
        height:                     100vh !important;
        padding:                    15px 15px 100px 15px !important;
        overflow:                   auto !important;
        -webkit-overflow-scrolling: touch !important;
        background:                 #f3f4f6 !important;
        box-sizing:                 border-box !important;
    }

    /* Hoja: tamaño real e inmutable (protege la exportación PDF) */
    .aivc-pdf-paper {
        width:     800px !important;
        min-width: 800px !important;
        max-width: 800px !important;
        margin:    0 auto !important;
        transform: none !important;
        zoom:      normal !important;
    }

    /* Botonera fijada al fondo */
    .aivc-pdf-sidebar {
        position:        fixed !important;
        bottom:          0 !important;
        left:            0 !important;
        width:           100% !important;
        height:          auto !important;
        min-width:       0 !important;
        flex-direction:  row !important;
        justify-content: space-around !important;
        align-items:     center !important;
        padding:         20px 15px 25px 15px !important;
        margin:          0 !important;
        border-radius:   0 !important;
        border-top:      1px solid #333333 !important;
        box-shadow:      0 -4px 15px rgba(0,0,0,0.3) !important;
        background:      #242424 !important;
        overflow:        visible !important;
        gap:             0 !important;
        z-index:         999999 !important;
        touch-action:    none !important;
    }

    /* Ocultar marca y textos */
    .aivc-pdf-sidebar-brand { display: none !important; }
    .pdf-text-desktop       { display: none !important; }

    /* Secciones del sidebar se vuelven items horizontales */
    .aivc-pdf-sidebar-section {
        padding:        0 !important;
        border:         none !important;
        flex-direction: row !important;
        align-items:    center !important;
        gap:            6px !important;
    }

    /* Grupos de control compactos */
    .aivc-pdf-control-group {
        flex-direction: row !important;
        align-items:    center !important;
        gap:            6px !important;
        padding:        0 !important;
        border:         none !important;
    }

    /* Botón Aa visible en móvil */
    .pdf-btn-mobile-aa { display: flex !important; }

    /* Controles de fuente: popover flotante */
    .pdf-font-controls {
        display:       none !important;
        position:      absolute !important;
        bottom:        90px !important;
        left:          50% !important;
        transform:     translateX(-50%) !important;
        background:    #222222 !important;
        padding:       10px 14px !important;
        border-radius: 8px !important;
        box-shadow:    0 -4px 15px rgba(0,0,0,0.4) !important;
        gap:           8px !important;
        align-items:   center !important;
        white-space:   nowrap !important;
        z-index:       10000 !important;
    }
    .pdf-font-controls.is-open-mobile { display: flex !important; }

    /* Todos los botones: cuadrado redondeado uniforme, blanco */
    .aivc-pdf-sidebar-btn,
    .pdf-btn-mobile-aa {
        border:          2.5px solid #ffffff !important;
        border-radius:   12px !important;
        width:           46px !important;
        height:          46px !important;
        display:         flex !important;
        align-items:     center !important;
        justify-content: center !important;
        background:      transparent !important;
        padding:         0 !important;
    }

    /* Forzar blanco en SVG y texto del botón Aa */
    .aivc-pdf-sidebar-btn svg,
    .pdf-btn-mobile-aa div,
    .pdf-btn-mobile-aa span {
        color:  #ffffff !important;
        stroke: #ffffff !important;
    }

    /* Botón imprimir en salmón */
    .aivc-pdf-sidebar-btn.aivc-pdf-btn-print {
        border-color: #fb5f6d !important;
        color:        #fb5f6d !important;
    }
    .aivc-pdf-sidebar-btn.aivc-pdf-btn-print svg {
        color:  #fb5f6d !important;
        stroke: #fb5f6d !important;
    }
    .aivc-pdf-sidebar-btn.aivc-pdf-btn-print:hover,
    .aivc-pdf-sidebar-btn.aivc-pdf-btn-print:active {
        background-color: #fb5f6d !important;
        color:            #ffffff !important;
    }
    .aivc-pdf-sidebar-btn.aivc-pdf-btn-print:hover svg,
    .aivc-pdf-sidebar-btn.aivc-pdf-btn-print:active svg {
        color:  #ffffff !important;
        stroke: #ffffff !important;
    }

    /* Tamaño de iconos SVG */
    .aivc-pdf-sidebar-btn svg {
        width:  22px !important;
        height: 22px !important;
    }
}