/* ====================================================
   SISTEMA DE BLOQUES DE CANCIÓN (ULTRA COMPACTO Y CENTRADO)
   ==================================================== */

.song-structure-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Espacio reducido entre un bloque y otro */
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ESTILO BASE PARA LOS BLOQUES */
.song-structure-wrapper .song-block {
  box-sizing: border-box;
  border-radius: 8px;
  padding: 6px 12px;
  border-left: 5px solid var(--theme-intro-border);
  background: var(--theme-intro-bg);
  color: var(--theme-lyrics-color, #f8fafc);
  box-shadow: var(--theme-shadow, 0 2px 4px rgba(0, 0, 0, 0.2));
  text-align: center;
}

/* Cabecera del bloque (Icono + Nombre) */
.song-structure-wrapper .block-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 3px;
  line-height: 1.1;
  user-select: none;
}

/* Cuerpo del bloque (La letra) */
.song-structure-wrapper .block-lyrics {
  font-size: 1.1rem;
  line-height: 1.25;
  white-space: pre-line;
  color: var(--theme-lyrics-color, #f1f5f9);
  text-align: center;
}

/* Notas aclaratorias o avisos para el cantante */
.song-structure-wrapper .block-note {
  margin-top: 2px;
  font-size: 0.8rem;
  font-style: italic;
  opacity: 0.85;
  color: var(--theme-lyrics-color, #f1f5f9);
  text-align: center;
}

/* ====================================================
   CONTROLES DE TEMAS / COLORES (PANEL FLOTANTE VERTICAL)
   ==================================================== */
/* Alineación centrada para la paleta de temas */
.theme-controls {
  display: flex !important;
  flex-direction: column !important; /* Forzamos columna vertical */
  align-items: center !important;     /* Centrado horizontal de los círculos */
  justify-content: center !important;
  width: 52px !important;            /* Mismo ancho que la caja superior */
  padding: 10px 6px !important;
  background: #ffffff !important;    /* Fondo blanco asegurado */
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.theme-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border: 2px solid transparent !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block !important;
  flex-shrink: 0 !important;          /* Evita que se aplasten o empequeñezcan */
}

.theme-btn:hover {
  transform: scale(1.15) !important;
}

.theme-btn.active {
  border-color: #000000 !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 6px rgba(0, 0, 0, 0.4) !important;
}

/* REGLA ESPECÍFICA PARA PANTALLAS PEQUEÑAS / MÓVILES */
@media (max-width: 768px) {
  .theme-controls {
    display: flex !important;
    flex-direction: column !important;
    width: 48px !important;          /* Ajuste leve de ancho para pantallas pequeñas */
    padding: 8px 4px !important;
    gap: 8px !important;
  }

  .theme-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
}

/* ====================================================
   DEFINICIÓN DE PALETAS DE COLOR (6 MODALIDADES)
   ==================================================== */

/* MODALIDAD 1: NEÓN / ORIGINAL (POR DEFECTO) */
:root, [data-theme="default"] {
--theme-lyrics-color: #f8fafc;
  --theme-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

  --theme-intro-border: #64748b; --theme-intro-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); --theme-intro-header: #94a3b8;
  --theme-verse-border: #3b82f6; --theme-verse-bg: linear-gradient(135deg, #1e293b 0%, #1e3a8a 100%); --theme-verse-header: #60a5fa;
  --theme-pre-border:   #f59e0b; --theme-pre-bg:   linear-gradient(135deg, #1e293b 0%, #78350f 100%); --theme-pre-header:   #fbbf24;
  --theme-chorus-border:#ef4444; --theme-chorus-bg: linear-gradient(135deg, #1e293b 0%, #7f1d1d 100%); --theme-chorus-header:#f87171;
  --theme-bridge-border:#a855f7; --theme-bridge-bg: linear-gradient(135deg, #1e293b 0%, #581c87 100%); --theme-bridge-header:#c084fc;
  --theme-solo-border:  #eab308; --theme-solo-bg:   linear-gradient(135deg, #1e293b 0%, #713f12 100%); --theme-solo-header:  #fde047;
	--theme-tab-border:  #10b981; --theme-tab-bg:  linear-gradient(135deg, #064e3b 0%, #022c22 100%); --theme-tab-header:  #6ee7b7;
}

/* MODALIDAD 2: FONDO BLANCO / LETRAS NEGRAS (LECTURA LUZ DÍA) */
[data-theme="light"] {
  --theme-lyrics-color: #0f172a;
  --theme-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);

  --theme-intro-border: #475569; --theme-intro-bg: #f1f5f9; --theme-intro-header: #334155;
  --theme-verse-border: #2563eb; --theme-verse-bg: #eff6ff; --theme-verse-header: #1d4ed8;
  --theme-pre-border:   #d97706; --theme-pre-bg:   #fffbeb; --theme-pre-header:   #b45309;
  --theme-chorus-border:#dc2626; --theme-chorus-bg: #fef2f2; --theme-chorus-header:#b91c1c;
  --theme-bridge-border:#9333ea; --theme-bridge-bg: #faf5ff; --theme-bridge-header:#6b21a8;
  --theme-solo-border:  #ca8a04; --theme-solo-bg:   #fefce8; --theme-solo-header:  #854d0e;
	--theme-tab-border:  #059669; --theme-tab-bg:  #ecfdf5; --theme-tab-header:  #047857;
}

/* MODALIDAD 3: CÁLIDO / ATARDECER */
[data-theme="warm"] {
  --theme-lyrics-color: #fff7ed;
  --theme-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

  --theme-intro-border: #78350f; --theme-intro-bg: linear-gradient(135deg, #292524 0%, #451a03 100%); --theme-intro-header: #fde68a;
  --theme-verse-border: #d97706; --theme-verse-bg: linear-gradient(135deg, #292524 0%, #78350f 100%); --theme-verse-header: #fef08a;
  --theme-pre-border:   #ea580c; --theme-pre-bg:   linear-gradient(135deg, #292524 0%, #7c2d12 100%); --theme-pre-header:   #fed7aa;
  --theme-chorus-border:#dc2626; --theme-chorus-bg: linear-gradient(135deg, #292524 0%, #991b1b 100%); --theme-chorus-header:#fca5a5;
  --theme-bridge-border:#c026d3; --theme-bridge-bg: linear-gradient(135deg, #292524 0%, #701a75 100%); --theme-bridge-header:#f5d0fe;
  --theme-solo-border:  #ca8a04; --theme-solo-bg:   linear-gradient(135deg, #292524 0%, #713f12 100%); --theme-solo-header:  #fef08a;
	--theme-tab-border:  #059669; --theme-tab-bg:  linear-gradient(135deg, #1c1917 0%, #064e3b 100%); --theme-tab-header:  #a7f3d0;
}

/* MODALIDAD 4: ESMERALDA / BOSQUE */
[data-theme="forest"] {
  --theme-lyrics-color: #ecfdf5;
  --theme-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

  --theme-intro-border: #475569; --theme-intro-bg: linear-gradient(135deg, #064e3b 0%, #022c22 100%); --theme-intro-header: #a7f3d0;
  --theme-verse-border: #10b981; --theme-verse-bg: linear-gradient(135deg, #064e3b 0%, #065f46 100%); --theme-verse-header: #6ee7b7;
  --theme-pre-border:   #84cc16; --theme-pre-bg:   linear-gradient(135deg, #064e3b 0%, #3f6212 100%); --theme-pre-header:   #bef264;
  --theme-chorus-border:#06b6d4; --theme-chorus-bg: linear-gradient(135deg, #064e3b 0%, #164e63 100%); --theme-chorus-header:#67e8f9;
  --theme-bridge-border:#a855f7; --theme-bridge-bg: linear-gradient(135deg, #064e3b 0%, #581c87 100%); --theme-bridge-header:#e9d5ff;
  --theme-solo-border:  #eab308; --theme-solo-bg:   linear-gradient(135deg, #064e3b 0%, #713f12 100%); --theme-solo-header:  #fde047;
	--theme-tab-border:  #34d399; --theme-tab-bg:  linear-gradient(135deg, #022c22 0%, #065f46 100%); --theme-tab-header:  #a7f3d0;
}

/* MODALIDAD 5: OCÉANO / CIAN */
[data-theme="ocean"] {
  --theme-lyrics-color: #f0f9ff;
  --theme-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

  --theme-intro-border: #334155; --theme-intro-bg: linear-gradient(135deg, #0f172a 0%, #0284c7 100%); --theme-intro-header: #bae6fd;
  --theme-verse-border: #0284c7; --theme-verse-bg: linear-gradient(135deg, #0f172a 0%, #0369a1 100%); --theme-verse-header: #7dd3fc;
  --theme-pre-border:   #06b6d4; --theme-pre-bg:   linear-gradient(135deg, #0f172a 0%, #155e75 100%); --theme-pre-header:   #67e8f9;
  --theme-chorus-border:#2563eb; --theme-chorus-bg: linear-gradient(135deg, #0f172a 0%, #1e40af 100%); --theme-chorus-header:#93c5fd;
  --theme-bridge-border:#6366f1; --theme-bridge-bg: linear-gradient(135deg, #0f172a 0%, #3730a3 100%); --theme-bridge-header:#a5b4fc;
  --theme-solo-border:  #38bdf8; --theme-solo-bg:   linear-gradient(135deg, #0f172a 0%, #075985 100%); --theme-solo-header:  #e0f2fe;
	--theme-tab-border:  #06b6d4; --theme-tab-bg:  linear-gradient(135deg, #0f172a 0%, #164e63 100%); --theme-tab-header:  #67e8f9;
}

/* MODALIDAD 6: ALTO CONTRASTE (NEGRO PURO) */
[data-theme="high-contrast"] {
  --theme-lyrics-color: #ffffff;
  --theme-shadow: none;

  --theme-intro-border: #ffffff; --theme-intro-bg: #000000; --theme-intro-header: #ffffff;
  --theme-verse-border: #60a5fa; --theme-verse-bg: #000000; --theme-verse-header: #60a5fa;
  --theme-pre-border:   #facc15; --theme-pre-bg:   #000000; --theme-pre-header:   #facc15;
  --theme-chorus-border:#f87171; --theme-chorus-bg: #000000; --theme-chorus-header:#f87171;
  --theme-bridge-border:#c084fc; --theme-bridge-bg: #000000; --theme-bridge-header:#c084fc;
  --theme-solo-border:  #fde047; --theme-solo-bg:   #000000; --theme-solo-header:  #fde047;
	--theme-tab-border:  #34d399; --theme-tab-bg:  #000000; --theme-tab-header:  #34d399;
}



/* ====================================================
   APLICACIÓN DE LAS VARIABLES A CADA TIPO DE BLOQUE
   ==================================================== */
.song-structure-wrapper .section-intro,
.song-structure-wrapper .section-outro {
  border-left-color: var(--theme-intro-border);
  background: var(--theme-intro-bg);
}
.song-structure-wrapper .section-intro .block-header,
.song-structure-wrapper .section-outro .block-header { 
  color: var(--theme-intro-header); 
}

.song-structure-wrapper .section-verse {
  border-left-color: var(--theme-verse-border);
  background: var(--theme-verse-bg);
}
.song-structure-wrapper .section-verse .block-header { 
  color: var(--theme-verse-header); 
}

.song-structure-wrapper .section-prechorus {
  border-left-color: var(--theme-pre-border);
  background: var(--theme-pre-bg);
}
.song-structure-wrapper .section-prechorus .block-header { 
  color: var(--theme-pre-header); 
}

.song-structure-wrapper .section-chorus {
  border-left-color: var(--theme-chorus-border);
  background: var(--theme-chorus-bg);
}
.song-structure-wrapper .section-chorus .block-header { 
  color: var(--theme-chorus-header); 
}
.song-structure-wrapper .section-chorus .block-lyrics { 
  font-weight: 600; 
}

.song-structure-wrapper .section-bridge {
  border-left-color: var(--theme-bridge-border);
  background: var(--theme-bridge-bg);
}
.song-structure-wrapper .section-bridge .block-header { 
  color: var(--theme-bridge-header); 
}

.song-structure-wrapper .section-solo {
  border-left-color: var(--theme-solo-border);
  background: var(--theme-solo-bg);
}
.song-structure-wrapper .section-solo .block-header { 
  color: var(--theme-solo-header); 
}

/* ====================================================
   BLOQUE DE TABLATURA / ACORDES (-TAB-)
   ==================================================== */

/* Por defecto se oculta */
.song-structure-wrapper .section-tab {
  display: none;
  border-left-color: var(--theme-tab-border);
  background: var(--theme-tab-bg);
  text-align: left !important;
}

.song-structure-wrapper .section-tab .block-header {
  color: var(--theme-tab-header);
  justify-content: flex-start !important;
}

.song-structure-wrapper .section-tab .block-lyrics {
  color: var(--theme-lyrics-color, #f1f5f9);
  text-align: left !important;
  font-family: 'Courier New', Courier, monospace !important;
  white-space: pre !important;
  overflow-x: auto;
}

/* Cuando la clase 'show-tabs' se activa globalmente, se muestran los bloques TAB */
html.show-tabs .song-structure-wrapper .section-tab,
body.show-tabs .song-structure-wrapper .section-tab {
  display: block !important;
}

/* Estilo para el botón activo de Tablatura en la barra flotante */
.btn-tab-toggle.activo {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
}