/* ==========================================================================
   PIANO ACORDES - CSS PROFESIONAL Y RESPONSIVO
   Desarrollado para aplicación de acordes de piano
   ========================================================================== */

/* ==========================================================================
   1. RESET / NORMALIZE
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =============================================================
   4.9 Diagrama de acordes e intervalos
   ============================================================= */
.chord-diagram {
  margin-top: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.9);
  border: var(--border-width) solid var(--color-gray-light);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--container-padding);
}

.chord-diagram .diagram-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--spacing-md);
}

.chord-diagram .translation-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.chord-diagram .translation-label {
  font-size: var(--font-size-sm);
  color: #2c3e50;
  opacity: 0.8;
}

.chord-diagram .translation-button {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-gray-light);
  background: var(--color-white);
  color: var(--color-dark);
  font-weight: 600;
  cursor: pointer;
}

.chord-diagram .translation-button.active {
  background: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}

.chord-diagram .chord-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-dark);
}

.chord-diagram .inversion-indicator {
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius-sm);
  padding: 2px 8px;
}

.chord-diagram .diagram-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.chord-diagram .chord-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.chord-diagram .note-badge {
  min-width: 42px;
  text-align: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid var(--color-gray-light);
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: var(--shadow-xs);
}

.chord-diagram .note-badge .note-en { font-weight: 700; }
.chord-diagram .note-badge .note-es { margin-left: 6px; font-size: var(--font-size-sm); opacity: 0.85; }
.chord-diagram .note-badge.translated { border-color: var(--color-secondary); box-shadow: 0 0 0 2px rgba(46,204,113,0.15); }
.chord-diagram .note-badge.translated .note-es { font-weight: 700; color: var(--color-secondary); }

.chord-diagram .note-badge.bass {
  background: #ffeeba;
  border-color: #ecebe6;
}

.chord-diagram .interval-badge {
  font-size: var(--font-size-sm);
  color: #2c3e50;
  opacity: 0.85;
}

/* Variantes por rol (opcional, para diferenciación sutil) */
.chord-diagram .note-badge.root { background: #e8f7ff; border-color: #8fd3ff; }
.chord-diagram .note-badge.third { background: #f3e8ff; border-color: #c19fff; }
.chord-diagram .note-badge.fifth { background: #e9ffd8; border-color: #a3e26e; }
.chord-diagram .note-badge.seventh { background: #ffe8ec; border-color: #ff9fb0; }
.chord-diagram .note-badge.ninth { background: #e8fff9; border-color: #9fe8d6; }
.chord-diagram .note-badge.eleventh { background: #fff5e8; border-color: #ffd39f; }
.chord-diagram .note-badge.thirteenth { background: #e8fff0; border-color: #9fffb9; }

/* Tema oscuro básico */
@media (prefers-color-scheme: dark) {
  .chord-diagram {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.15);
  }
  .chord-diagram .chord-title { color: var(--color-white); }
  .chord-diagram .note-badge { background: rgba(255,255,255,0.1); color: var(--color-white); }
  .chord-diagram .interval-badge { color: var(--color-white); opacity: 0.7; }
  .chord-diagram .translation-label { color: var(--color-white); opacity: 0.7; }
}

/* Responsivo */
@media (max-width: 767px) {
  .chord-diagram { padding: 16px; }
  .chord-diagram .diagram-header { flex-direction: column; gap: 6px; align-items: flex-start; }
}

html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  height: 100%;
}

body {
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  background-color: #f8f9fa;
  height: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

button, input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
}

button {
  cursor: pointer;
  border: none;
}

ul, ol {
  list-style: none;
}

a {
  color: #0d6efd;
  text-decoration: none;
}

/* ==========================================================================
   2. VARIABLES
   ========================================================================== */
:root {
  /* Colores principales */
  --color-primary: #2c3e50;
  --color-secondary: #3498db;
  --color-accent: #e74c3c;
  --color-success: #2ecc71;
  --color-warning: #f39c12;
  --color-info: #3498db;
  --color-light: #ecf0f1;
  --color-dark: #2c3e50;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray: #95a5a6;
  --color-gray-light: #ecf0f1;
  --color-gray-dark: #7f8c8d;
  
  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Espaciado */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  /* Espaciado específico, margen entre el display y la cabezera */ 
  --spacing-display-top: 18px; /* margen superior para la pantalla digital */
  
  /* Bordes */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 1rem;
  --border-width: 1px;
  
  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  
  /* Fuentes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2rem;
  
  /* Contenedores */
  --container-max-width: 1200px;
  --container-padding: 1rem;
  
  /* Dimensiones del display */
  --display-height: 120px; /* altura fija más cómoda para 2 líneas */
  --display-padding-y: 10px; /* padding vertical del contenedor del display */
}

/* ==========================================================================
   3. LAYOUT & CONTENEDORES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--container-padding);
  background: #ffffff;
  box-sizing: border-box;
}

header {
 
  background-color: #2c353f;
  color: var(--color-white);
  padding: var(--spacing-xs) var(--spacing-sm); /* compacto y con separación lateral */
  box-shadow: var(--shadow-md);
  /* Sin marco: eliminar borde inferior para un header limpio */
  border-radius: 15px; /* radio fijo como antes */
  overflow: hidden; /* respetar esquinas redondeadas */
}

header h1 {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  margin-bottom: var(--spacing-xs); /* reduce espacio bajo el título */
  text-align: center;
}

.container p{
  font-size: 12px;
  text-align: center;
 font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* Menú hamburguesa móvil */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: #3498db;
  color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
}

.mobile-menu-toggle .hamburger {
  width: 20px;
  height: 2px;
  background: #fff;
  position: relative;
}

.mobile-menu-toggle .hamburger::before,
.mobile-menu-toggle .hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
}

.mobile-menu-toggle .hamburger::before { top: -6px; }
.mobile-menu-toggle .hamburger::after { top: 6px; }

.mobile-nav {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border-top: 2px solid #3498db;
  z-index: 1000;
  box-sizing: border-box;
}

.mobile-nav ul { padding: 10px; }
.mobile-nav li { margin: 8px 0; }
.mobile-nav a {
  display: block;
  padding: 12px 16px;
  color: #2c3e50;
  font-weight: 600;
}

.mobile-nav.open { display: block; }

main {
  padding: 0 0 var(--spacing-lg) 0; /* elimina espacio superior, conserva inferior */
}

section {
  margin-bottom: var(--spacing-xl);
}

.section {
  display: none;
}

.section.active {
  display: block;
}

/* Panel de Funcionamiento (Resumen Ejecutivo) */
.help-panel {
  /* Panel colapsado por defecto: sin espacio visible */
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 12px;
  padding: 0;
  margin: 0;
  max-width: 980px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 400ms ease, opacity 300ms ease, transform 300ms ease;
}
.help-panel.open {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 16px;
  margin: 16px auto;
  /* Evitar que el contenido se recorte en escritorio y móviles */
  max-height: none;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
}
.help-content {
  color: #2c3e50;
}
.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.help-header h2 {
  margin: 0;
  font-size: 1.4rem;
}
.help-actions {
  display: flex;
  gap: 8px;
}
.help-print,
.help-close,
.help-toggle {
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  background: #3498db;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.help-close { background: #7f8c8d; }
.help-toggle {
  background: var(--color-secondary);
  padding: 6px 10px;
  font-size: 0.9rem;
}
.panel-header .help-toggle {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  vertical-align: middle;
  min-height: 44px;
}
.help-print:hover,
.help-close:hover,
.help-toggle:hover { transform: translateY(-1px); }
.help-toggle:hover { background-color: #2980b9; }
.help-print:active,
.help-close:active,
.help-toggle:active { transform: translateY(0); }
.help-section { margin: 12px 0; }
/* Título de sección (h3): tamaño, peso y color consistentes */
.help-section h3 {
  margin: 0 0 8px 0;
  font-weight: 700;
  color: var(--color-primary);
}
.help-feature { margin: 10px 0; }
.help-feature h4 {
  margin: 0 0 6px 0;
  font-weight: 600;
  color: var(--color-primary);
}
.help-content p {
  margin: 0 0 10px 0; /* espaciado uniforme entre párrafos */
}
.help-feature figure {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.help-feature img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
/* Móvil: botones Imprimir y Cerrar más amigables */
@media (max-width: 767px) {
  /* Evitar desbordes horizontales al abrir el menú móvil */
  html, body { overflow-x: hidden; }

  /* Hacer el panel del menú más estrecho y centrado para no salirse */
  .mobile-nav {
    left: 5%;
    right: 5%;
    width: auto;
    max-width: 90%;
    border-radius: 8px;
  }
  .help-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .help-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .help-actions .help-print,
  .help-actions .help-close {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 1rem;
  }
  .help-actions .help-print:focus-visible,
  .help-actions .help-close:focus-visible {
    outline: 3px solid rgba(52, 152, 219, 0.35);
    outline-offset: 2px;
  }
}

@media (max-width: 480px) {
  .help-actions .help-print,
  .help-actions .help-close {
    font-size: 0.95rem;
    padding: 12px 14px;
  }
}

/* Responsivo */
@media (max-width: 768px) {
  .help-panel.open {
    padding: 12px;
    margin: 10px;
    max-height: none; /* asegurar que no se recorte en móviles */
    overflow: visible; /* permite que el contenido se expanda completamente */
  }
  .help-header h2 { font-size: 1.2rem; }
}

/* Imágenes y SVG responsivos: evitar desbordes horizontales */
img, svg {
  max-width: 100%;
  height: auto;
}

/* Ajuste de texto: evitar cortes por palabras largas */
p, li { 
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Impresión: evitar recortes y superposiciones */
@media print {
  .synth-display {
    position: static !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }
  .container { padding-bottom: 0 !important; }
  /* Evitar que bloques se partan entre páginas */
  h2, h3, .section, .control-section, .help-panel, .help-feature, .panel-header { 
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Seguridad de ancho en escritorio: no exceder el viewport */
@media (min-width: 768px) {
  .synth-display { 
    max-width: clamp(320px, 96vw, 400px);
  }
}

/* Márgenes estándar al imprimir */
@page { margin: 12mm; }

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .help-panel { transition: none !important; }
}

/* Impresión: mostrar el panel y ocultar elementos no esenciales */
@media print {
  .help-panel {
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
  }
  .help-actions,
  .mobile-menu-toggle,
  .display-toggle,
  .play-chord-floating { display: none !important; }
}

/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* 4.1 Navegación y búsqueda  */
.profile-icon {
  height: 90px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Fila de marca: imagen + título juntos */
.brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.brand-row h1 {
  margin: 0; /* evitar espacio extra cuando está junto a la imagen */
  line-height: 1;
  
}



.search-container {
  display: flex;
  flex: 1;
  max-width: 500px;
}

#search-input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width) solid var(--color-gray-light);
  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}

#search-input:focus {
  border-color: var(--color-secondary);
}

#search-button {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  transition: background-color var(--transition-fast);
}

#search-button:hover {
  background-color: #2980b9;
}

/* 4.2 Información de acordes */
.chord-info {
  background-color: var(--color-white);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
}

.chord-info h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}

.chord-info p {
  margin-bottom: var(--spacing-sm);
  color: var(--color-gray-dark);
}

/* 4.3 Posiciones de acordes */
.chord-positions {
  background-color: var(--color-white);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
}

.position-tab {
  display: flex;
  flex-direction: column; /* apilar botones en columna */
  flex-wrap: nowrap;
  background-color: var(--color-gray-light);
  border-bottom: var(--border-width) solid var(--color-gray);
}


/* Botón base para pestañas de posición */
.position-button {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-gray-light);
  color: var(--color-dark);
  border: none;
  text-align: center;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}



.position-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.position-button.active {
  background-color: var(--color-white);
  font-weight: 600;
  border-bottom: 3px solid var(--color-secondary);
}

/* Indicador visual del estado natural (predeterminado) */
.position-button.default-indicator {
  background-color: var(--color-white);
  border-bottom: 3px solid var(--neon-blue, #00e6ff);
  box-shadow:
    0 0 0 1px rgba(0,230,255,0.25) inset,
    0 0 8px rgba(0,230,255,0.35);
  color: var(--color-dark);
}

.position-display {
  padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
}


/* 4.5 Controles de audio */
.audio-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.audio-controls button {
  background-color: var(--color-secondary);
  color: var(--color-white);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.audio-controls button:hover {
  background-color: #2980b9;
}

.audio-controls button i {
  font-size: var(--font-size-sm);
}

.piano-size-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.piano-size-controls button {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-gray-light);
  color: var(--color-dark);
  border-radius: 50%;
  transition: background-color var(--transition-fast);
}

.piano-size-controls button:hover {
  background-color: var(--color-gray);
}

#piano-size-label {
  font-size: var(--font-size-sm);
  color: var(--color-dark);
  width: 50px;
  text-align: center;
}

/* 4.6 Controles de micrófono */
.mic-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--color-gray-light);
  border-radius: var(--border-radius-md);
}

.mic-controls label {
  font-size: var(--font-size-sm);
  color: var(--color-dark);
}

#mic-sensitivity {
  width: 100%;
  margin: var(--spacing-xs) 0;
}

/* Estilos avanzados del slider de sensibilidad (gradiente dinámico y outline) */
#mic-sensitivity {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  background: linear-gradient(90deg, #00ff00 0%, var(--sens-color, #00ff00) var(--sens-percent, 60%), transparent var(--sens-percent, 60%), transparent 100%);
  border-radius: 999px;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}

/* Estado deshabilitado: mantener gris idéntico al botón de micrófono apagado */
#mic-sensitivity:disabled {
  --sens-color: #7f8c8d; /* gris mic-off */
  --sens-percent: 100%;
  cursor: not-allowed;
}

/* WebKit track */
#mic-sensitivity::-webkit-slider-runnable-track {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00ff00 0%, var(--sens-color, #00ff00) var(--sens-percent, 60%), transparent var(--sens-percent, 60%), transparent 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}

#mic-sensitivity:disabled::-webkit-slider-runnable-track {
  background: #7f8c8d;
}

/* WebKit thumb */
#mic-sensitivity::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sens-color, #00ff00);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  margin-top: -2px; /* centra el thumb respecto al track */
  transition: background-color 180ms ease;
}

#mic-sensitivity:disabled::-webkit-slider-thumb {
  background: #7f8c8d;
}

/* Firefox track */
#mic-sensitivity::-moz-range-track {
  height: 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.12);
}

#mic-sensitivity:disabled::-moz-range-track {
  background: #7f8c8d;
}

/* Firefox progress (parte rellena) */
#mic-sensitivity::-moz-range-progress {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00ff00 0%, var(--sens-color, #00ff00) 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
}

#mic-sensitivity:disabled::-moz-range-progress {
  background: #7f8c8d;
}

/* Firefox thumb */
#mic-sensitivity::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sens-color, #00ff00);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background-color 180ms ease;
}

#mic-sensitivity:disabled::-moz-range-thumb {
  background: #7f8c8d;
}

.mic-level {
  width: 100%;
  height: 10px;
  background-color: var(--color-gray);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.mic-level-bar {
  height: 100%;
  width: 0;
  background-color: var(--sens-color, var(--color-success));
  transition: width var(--transition-fast);
}

/* Visualización del micrófono: evitar desbordes del canvas */
.mic-visualization {
  width: 100%;
}

#mic-frequency-canvas {
  width: 100%; /* ocupa todo el ancho disponible del contenedor */
  max-width: 100%;
  height: 80px; /* altura visual estable */
  display: block; /* elimina espacios inline que pueden afectar el layout */
  border-radius: 6px;
  box-sizing: border-box; /* respeta padding/bordes del contenedor */
}

.debug-info {
  font-size: var(--font-size-xs);
  background-color: var(--color-white);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  width: 100%;
}

.debug-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}

/* 4.7 Display y controles de sonido */
.synth-display {
  
  margin: var(--spacing-display-top) auto var(--spacing-lg) auto; /* respiro superior variable + separación inferior */
  text-align: center;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  border: 2px solid #f9db7a;
  border-radius: 12px;
  padding: var(--display-padding-y);
  padding-bottom: var(--display-padding-y); /* espacio extra interno abajo */
  box-shadow: 
    inset 0 2px 10px rgba(0, 0, 0, 0.3),
    0 4px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  max-width: 400px;
  min-width: 340px; /* rango flexible manteniendo estabilidad */
  height: var(--display-height); /* altura fija para evitar movimiento del layout */
  min-height: calc(var(--font-size-lg) + var(--font-size-sm) + (var(--spacing-md) * 2)); /* alto mínimo estable para 2 líneas */
  font-family: 'Courier New', monospace;
  color: var(--display-color, var(--color-success));
}

/* Base: oculta controles móviles en escritorio */
.display-toggle { display: none; }
.play-chord-floating { display: none; }
.drag-handle { display: none; }

/* Panel Unificado de Controles */
.unified-controls-panel {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border: 2px solid #dee2e6;
    border-radius: 15px;
    padding: 30px;
    margin: 0 auto 40px auto;
    max-width: 1200px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    position: relative;
}

.unified-controls-panel::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #3498db, #9b59b6, #e74c3c, #27ae60);
    border-radius: 17px;
    z-index: -1;
    opacity: 0.1;
}

.panel-header {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 20px;
    border-bottom: 3px solid #3498db;
}

.panel-header h2 {
    margin: 0 0 8px 0;
    color: #2c3e50;
    font-size: 1.8em;
    font-weight: 700;
}

.panel-header p {
    margin: 0;
    color: #7f8c8d;
    font-size: 1em;
    font-style: italic;
}

.control-section {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.control-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.control-section h3 {
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-size: 1.2em;
    font-weight: 600;
    border-bottom: 2px solid #ffffff;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Centrar el título de la sección de acordes */
.chord-section h3 {
  justify-content: center;
  text-align: center;
}

.chord-section h3::before {
    content: '🎵';
    font-size: 1.2em;
}

.audio-section h3::before {
    content: '🔊';
    font-size: 1.2em;
}

.mic-section h3::before {
    content: '🎤';
    font-size: 1.2em;
}


/* Sección de Búsqueda y Acordes */
.search-container-unified {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
  flex-wrap: wrap; /* evita desbordes; permite saltar a nueva línea */
}

.search-container-unified input {
  flex: 1 1 280px; /* crece y se reduce; base razonable */
  min-width: 0; /* permite que el input se encoja dentro del contenedor */
  padding: 10px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px; /* iOS: evita zoom automático al enfocar */
  transition: border-color 0.3s ease;
}

.search-container-unified input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.search-container-unified button {
  flex: 0 0 auto; /* tamaño del botón no fuerza overflow del contenedor */
  white-space: nowrap; /* evita que "Buscar" se parta en dos líneas */
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.search-container-unified button:hover {
  background: #2980b9;
}

/* Desktop: tipografía y padding más compactos, mantener en una línea */
@media (min-width: 1024px) {
  .search-container-unified {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  .search-container-unified input {
    font-size: 14px; /* desktop compacto, sin afectar móviles */
    padding: 8px 12px;
  }
  .search-container-unified button {
    font-size: 13px;
    padding: 8px 14px;
    line-height: 1.2;
  }
}

/* Regla general para inputs: asegura 16px mínimo en móviles para evitar zoom */
input[type="text"], input[type="search"], textarea {
  font-size: 16px;
}

/* Mejora del comportamiento con teclado virtual: usa viewport pequeño si está disponible */
@supports (height: 100svh) {
  body { min-height: 100svh; }
}

/* Ajuste de elementos fijos con safe-area en móviles modernos */
.display-toggle {
  bottom: calc(env(safe-area-inset-bottom) + 12px);
}
.play-chord-floating {
  bottom: calc(env(safe-area-inset-bottom) + 90px);
}

/* Sección de Audio */
.audio-controls-unified {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.audio-controls-unified button {
  flex: 1;
  min-width: 120px;
  padding: 12px 15px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.audio-controls-unified button:hover {
  background: #229954;
}

.volume-controls {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}


.display-controls {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.display-controls .setting {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 120px;
}

.display-controls label {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
}

.display-controls input[type="range"] {
  width: 100%;
}

.display-controls input[type="color"] {
  width: 50px;
  height: 35px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Controles de Micrófono */
.mic-section .mic-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.mic-section .mic-controls label {
    font-weight: 500;
    color: #2c3e50;
}

.mic-section .mic-controls input[type="range"] {
    width: 100%;
}

.mic-section .mic-controls button {
    align-self: center;
    padding: 10px 16px;
    background: #9b59b6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform var(--transition-fast);
}

.mic-section .mic-controls button:hover {
    background: #8e44ad;
    transform: translateY(-1px);
}

/* Estado visual del botón de micrófono */
#mic-toggle.mic-off {
  background: #7f8c8d; /* gris para indicar desactivado */
  color: white;
}

/* Botón Debug deshabilitado: gris consistente con mic-off */
#toggle-debug:disabled {
  background: #7f8c8d;
  color: white;
  cursor: not-allowed;
}

/* Evitar hover distinto cuando está deshabilitado */
.mic-section .mic-controls button:disabled:hover,
#toggle-debug:disabled:hover {
  background: #7f8c8d;
  transform: none;
}

/* Transiciones suaves para líneas del display durante bienvenida */
#display-primary,
#display-secondary {
  transition: opacity 300ms ease;
}

#mic-toggle.mic-on {
  background: #9b59b6; /* púrpura activo (coincide con estilo base) */
}

/* Contenedor unificado de controles principales (micrófono, sensibilidad, debug) */
.mic-primary-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.mic-primary-controls > button {
  flex: 1 1 160px;
  min-width: 140px;
}

/* Indicador LED de micrófono */
.mic-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1) inset, 0 0 6px rgba(0,0,0,0.15);
  margin-left: 8px;
  align-self: center;
  display: inline-block;
}
.mic-led.on {
  background: #2ecc71; /* verde sutil */
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1) inset, 0 0 8px rgba(46, 204, 113, 0.6);
}
.mic-led.off {
  background: #bdc3c7; /* gris apagado */
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1) inset;
}

.mic-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 2 1 260px;
  min-width: 200px;
}

.mic-control label {
  font-weight: 500;
  color: #2c3e50;
}

.mic-control input[type="range"] {
  width: 100%;
}

@media (max-width: 767px) {
  .mic-primary-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
  }

  .mic-primary-controls > button,
  .mic-control {
    width: 100%;
    flex: 1 1 100%;
  }
}

.display-screen {
  background-color: rgba(0, 0, 0, 0.3);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-family: 'Courier New', monospace;
  text-align: center; /* Centrar contenido del display */
  position: relative; /* Necesario para ubicar el asa de arrastre */
  height: 100%; /* usa toda la altura disponible del contenedor (border-box) */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente ambas líneas */
}

/* Botón Next (Siguiente acorde) dentro del display */
.next-chord-button {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: none; /* visible solo con micrófono activo */
  align-items: center;
  justify-content: center;
  /* Tamaño proporcional al display, con mínimo táctil accesible */
  --next-size: clamp(44px, calc(var(--display-height, 120px) * 0.28), 56px);
  min-height: var(--next-size);
  padding: 0 10px;
  border-radius: var(--border-radius-sm);
  font-family: 'Courier New', monospace; /* consistencia tipográfica con el display/volumen */
  font-weight: 600;
  font-size: clamp(12px, calc(var(--display-height, 120px) * 0.075), 15px);
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 10; /* sobre contenido del display */
  /* Esquemas y efectos del indicador de volumen */
  background: rgba(0,0,0,0.28);
  color: var(--display-color, var(--color-success));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 6px rgba(0,0,0,0.45), 0 0 8px rgba(0,255,166,0.25);
  text-shadow: 0 0 6px rgba(0,255,166,0.6);
  backdrop-filter: blur(2px);
  transition: box-shadow 160ms ease, filter 160ms ease, opacity 160ms ease;
}
.next-chord-button:hover {
  box-shadow: inset 0 1px 6px rgba(0,0,0,0.45), 0 0 12px rgba(0,255,166,0.6);
}
.next-chord-button:active {
  box-shadow: inset 0 1px 6px rgba(0,0,0,0.45), 0 0 6px rgba(0,255,166,0.35);
}
.next-chord-button:focus-visible {
  outline: 2px solid rgba(0,255,166,0.35);
  outline-offset: 2px;
}

/* Variantes de estilo coherentes con la interfaz */
.next-chord-button.next-style-pill {
  background-color: var(--color-secondary);
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.18);
}
.next-chord-button.next-style-pill:hover {
  background-color: #2980b9; /* tono coherente al hover ya usado */
}

.next-chord-button.next-style-neon {
  background: rgba(0,0,0,0.35);
  color: var(--display-color, #00ffa6);
  border: 1px solid rgba(0,255,166,0.35);
  box-shadow:
    inset 0 1px 6px rgba(0,0,0,0.45),
    0 0 12px rgba(0,255,166,0.45),
    0 6px 18px rgba(0,0,0,0.25);
  text-shadow: 0 0 6px rgba(0,255,166,0.6);
  backdrop-filter: blur(2px);
}
.next-chord-button.next-style-neon:hover {
  box-shadow:
    inset 0 1px 6px rgba(0,0,0,0.45),
    0 0 16px rgba(0,255,166,0.6),
    0 8px 22px rgba(0,0,0,0.28);
}

.next-chord-button.next-style-outline {
  background: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  box-shadow: none;
}
.next-chord-button.next-style-outline:hover {
  background: rgba(52,152,219,0.12);
}

.next-chord-button.next-style-glass {
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.7) 100%);
  color: rgba(0,0,0,0.78);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 2px rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.85);
}
.next-chord-button.next-style-glass:hover { filter: brightness(1.05); }
.next-chord-button.next-style-glass:active { filter: brightness(0.98); }

.display-line {
  margin-bottom: var(--spacing-xs);
  white-space: nowrap; /* evita saltos de línea que cambian altura */
  line-height: 1.3; /* más aire para evitar cortes de ascendentes/descendentes */
  padding: 2px 0; /* margen interno vertical para legibilidad */
  overflow-x: hidden; /* oculta desbordes horizontales */
  overflow-y: visible; /* permite mostrar completamente las letras */
  text-overflow: ellipsis;
}

.display-line.primary {
  font-size: var(--display-font-primary, var(--font-size-lg));
  font-weight: bold;
}

.display-line.secondary {
  font-size: var(--display-font-secondary, var(--font-size-sm));
  opacity: 0.8;
}

/* Modo compacto del display */
.synth-display.compact {
  --display-height: 104px;
}
.synth-display.compact .display-line {
  line-height: 1.2;
}
.synth-display.compact .display-line.primary {
  font-size: calc(var(--display-font-primary, var(--font-size-lg)) - 2px);
}
.synth-display.compact .display-line.secondary {
  font-size: calc(var(--display-font-secondary, var(--font-size-sm)) - 1px);
}

.volume-corner {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  /* Compacto e integrado al display */
  font-size: 9px;
  background: rgba(0,0,0,0.28); /* leve vidrio sobre el display */
  color: var(--display-color, var(--color-success));
  padding: 0px 4px;
  line-height: 1;
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 6px rgba(0,0,0,0.45), 0 0 8px rgba(0,255,166,0.25);
  text-shadow: 0 0 6px rgba(0,255,166,0.6);
  font-family: 'Courier New', monospace; /* coincide con display */
  backdrop-filter: blur(2px);
}

/* (removido) estilos del badge de cuenta regresiva */

.sound-knob-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Centrar el control de Mute igual que el knob */
.sound-mute-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.sound-mute-container label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-dark);
}

.sound-knob-container label {
  font-size: var(--font-size-sm);
  color: var(--color-dark);
}

.knob-wrapper {
  width: 60px;
  height: 60px;
  background-color: var(--color-secondary);
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-sm), inset 0 2px 4px rgba(255,255,255,0.18), inset 0 -3px 6px rgba(0,0,0,0.25);
  /* Variables dinámicas para sombreado */
  --knob-angle: 0deg;
  --shadow-strength: 0.16;
  --highlight-strength: 0.12;
}

.knob-wrapper::before {
  content: '';
  position: absolute;
  width: 54px;
  height: 54px;
  /* Carátula con textura y profundidad */
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.25) 28%, rgba(255,255,255,0) 60%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.0) 85%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px),
    var(--color-white);
  border-radius: 50%;
  box-shadow: inset 0 8px 12px rgba(0,0,0,0.12), inset 0 -6px 10px rgba(255,255,255,0.18);
}

/* Brillo suave superior para simular reflejo */
.knob-wrapper::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0) 65%);
}

/* Puntos perimetrales del knob (se posicionan vía JS) */
.knob-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.knob-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.0) 100%);
  box-shadow: 0 0 1px rgba(255,255,255,0.4) inset;
  transform-origin: center;
}

/* Signos + y − en los knobs */
.knob-sign {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 11px;
  color: rgba(0,0,0,0.6);
  text-shadow: 0 1px 1px rgba(255,255,255,0.6);
  pointer-events: none;
  z-index: 1;
  user-select: none;
}

.knob-sign.minus { left: 8%; }
.knob-sign.plus { right: 8%; }

.knob {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.knob-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 40%;
  background-color: var(--color-secondary);
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(0deg);
  z-index: 1;
  border-radius: var(--border-radius-sm);
}

/* 4.8 Botones de acordes */
.chord-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.chord-button {
  background-color: var(--color-white);
  color: var(--color-dark);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  border: var(--border-width) solid var(--color-gray-light);
  transition: all var(--transition-fast);
  text-align: center;
  /* Evitar recortes internos y centrar contenido */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
}

.chord-button:hover {
  background-color: var(--color-gray-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.chord-button.active {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}

/* ==========================================================================
   5. UTILIDADES
   ========================================================================== */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

/* ==========================================================================
   6. MEDIA QUERIES
   ========================================================================== */

/* Overlay de descanso */
.break-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.break-overlay.show { display: flex; }
.break-card {
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  color: #fff;
  max-width: 360px;
  width: 100%;
  text-align: center;
  padding: 18px 20px;
}
.break-visual {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 12px;
}
.break-dog {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 15%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.break-visual .zzz {
  position: absolute;
  right: -6px;
  top: -8px;
  font-family: 'Courier New', monospace;
  color: #90caf9;
  opacity: 0;
  pointer-events: none;
  animation: zzzFloat 2.6s ease-in-out infinite;
}
.break-visual .zzz.z1 { font-size: 16px; animation-delay: 0s; }
.break-visual .zzz.z2 { font-size: 13px; animation-delay: 0.6s; }
.break-visual .zzz.z3 { font-size: 11px; animation-delay: 1.2s; }

@keyframes zzzFloat {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  55% { transform: translate(10px, -18px) rotate(-4deg); opacity: 0.9; }
  100% { transform: translate(20px, -36px) rotate(-8deg); opacity: 0; }
}
.break-note { opacity: 0.85; margin-bottom: 12px; }

/* Botón: Tomar un descanso (cabecera) */
.panel-header .break-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px; /* igual que .help-toggle */
  border-radius: 10px; /* igual que .help-toggle */
  font-size: 0.9rem; /* igual que .help-toggle */
  font-weight: 600; /* igual que .help-toggle */
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  background: var(--color-secondary);
  color: #fff;
  border: none;
  box-shadow: none; /* se sobrescribe abajo con glow compartido */
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  margin-top: 8px; /* igual que .help-toggle en el header */
  line-height: 1;
  vertical-align: middle;
  min-height: 44px;
}
.panel-header .break-toggle .break-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.6);
}
.panel-header .help-toggle .help-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.6);
}
.panel-header .break-toggle:hover { transform: translateY(-1px); background-color: #2980b9; }

/* Botón: Volver (overlay) */
#break-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--spacing-lg);
  border-radius: 999px;
  background: #3498db;
  color: #fff;
  border: 1px solid #2980b9;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  font-weight: 700;
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 200ms ease;
}
#break-close:hover {
  background-color: #2980b9;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
}
#break-close:active { transform: translateY(0); }
#break-close:focus-visible {
  outline: 3px solid rgba(52,152,219,0.35);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .panel-header .break-toggle { padding: 6px 10px; font-size: 0.95rem; }
  #break-close { width: 100%; }
}

/* Overlay admin */


/* Tablets (768px - 1023px) */
@media (max-width: 1023px) {
  :root {
    --container-padding: 0.75rem;
  }
  
  header h1 {
    font-size: var(--font-size-xl);
  }
  
  nav {
    flex-direction: column;
  }
  
  .search-container {
    max-width: 100%;
    margin-top: var(--spacing-sm);
  }
  
  .piano-keyboard {
    height: 160px;
  }
  
  .piano-key.white {
    width: 35px;
    height: 160px;
  }
  
  .piano-key.black {
    width: 22px;
    height: 100px;
  }
  
  .audio-controls {
    gap: var(--spacing-sm);
  }
  
  /* Panel Unificado Tablets */
  .unified-controls-panel {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 20px;
    gap: 20px;
  }
}

/* Móviles grandes (481px - 767px) */
@media (max-width: 767px) {
  :root {
    --container-padding: 0.5rem;
    --font-size-xxl: 1.75rem;
  }
  
  header h1 {
    font-size: var(--font-size-lg);
  }
  /* Igualar ancho visual del header al cuerpo (panel) */
  header {
    margin: 0 10px; /* coincidir con .unified-controls-panel en móviles */
    border-radius: 15px; /* radio fijo en móvil */
    margin-bottom: var(--spacing-md); /* más espacio entre header y cuerpo */
  }
  
  .position-button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
  
  
  .chord-buttons {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .audio-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .synth-display {
    max-width: 100%;
  }
  
  .mic-controls {
    width: 100%;
  }
  
  /* Panel Unificado Móviles */
  .unified-controls-panel {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
  
  .control-section {
    padding: 15px;
  }

  /* Knobs más grandes para mejor control táctil */
  .knob-wrapper {
    width: 62px;
    height: 62px;
  }

  .knob-wrapper::before {
    width: 58px;
    height: 58px;
  }

  .knob-indicator {
    height: 44%;
  }

  .knob-sign { font-size: 12px; }
  
  .audio-controls-unified {
    flex-direction: column;
  }
  
  .audio-controls-unified button {
    min-width: auto;
  }
  
  .volume-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .display-controls {
    flex-direction: column;
  }
  /* Evitar overflow del buscador en móviles grandes */
  .search-container-unified {
    flex-direction: column;
    gap: 8px;
  }
  .search-container-unified button {
    width: 100%;
    align-self: stretch;
    padding: 12px 16px; /* un poco más alto para tap targets */
  }
  .search-container-unified input {
    width: 100%;
    /* Importante: en columna, el flex-basis de 280px del input
       se interpreta como altura. Anulamos para evitar que se estire
       verticalmente como si fuera un textarea. */
    flex: 0 0 auto;
    height: auto;
  }
  
  .piano-section .piano-size-controls {
     justify-content: center;
   }
  /* Controles de navegación móvil y ajustes adicionales */
  .mobile-menu-toggle {
    display: flex;
    box-sizing: border-box;
    width: 92%;
    max-width: 380px; /* más ancho en móviles */
    margin: 8px auto;
    padding: 10px 14px; /* un poco más de padding */
    font-size: 15px;
  }
  nav { display: none; }
  .synth-display { --display-padding-y: 14px; padding: var(--display-padding-y); }
  .control-section { padding: 12px; }
  /* Touch targets y botones más grandes */
  button, .position-button, .audio-controls-unified button, .piano-section .piano-size-controls button {
    min-width: 48px;
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  /* Party y Reset: asegurar tap targets adecuados en móviles */
  #display-party.party-toggle {
    min-height: 44px;
    padding: 6px 14px;
    font-size: 14px;
  }
  #display-reset {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 14px;
  }
}

/* Móviles muy pequeños (≤480px): más aire lateral para evitar tocar bordes */
@media (max-width: 480px) {
  :root {
    --container-padding: 0.75rem;
  }
}

/* Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
  html, body {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  header h1 {
    font-size: 1.5rem;
  }
  
  /* Más compacto en móviles muy pequeños para evitar recortes por overflow */
  .mobile-menu-toggle {
    width: 94%;
    max-width: 340px; /* ancho contenido en pantallas muy pequeñas */
    margin: 8px auto;
    padding: 9px 12px;
    font-size: 14px;
    display: flex;
  }

  /* Panel del menú aún más contenido para pantallas muy pequeñas */
  .mobile-nav {
    left: 4%;
    right: 4%;
    width: auto;
    max-width: 92%;
    border-radius: 8px;
  }

  nav {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .search-container {
    width: 100%;
  }


  .chord-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 3px;
  }

  button, .chord-button, .control-button {
    width: 100%;
    margin: 3px 0;
    padding: 8px;
    font-size: 0.85rem;
  }

  .chord-info, .chord-display {
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
  }

  .controls {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .audio-controls {
    margin: 10px 0;
    padding: 0;
  }

  .piano-size-controls {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin: 5px 0;
  }

  .knob-wrapper {
    width: 72px;
    height: 72px;
  }

  .knob-wrapper::before {
    width: 68px;
    height: 68px;
  }

  .knob-indicator {
    height: 48%;
  }

  .knob-sign { font-size: 14px; }

  /* Ajuste de puntos perimetrales en móviles pequeños */
  .knob-dot {
    width: 2px;
    height: 2px;
  }

  .sound-knob-container label {
    font-size: 0.8rem;
  }
  
  .position-tab {
    display: flex;
    flex-direction: column;
  }
  
  .position-button {
    border-bottom: var(--border-width) solid var(--color-gray);
  }
  
  .position-button.active {
    border-bottom: var(--border-width) solid var(--color-secondary);
    border-right: none;
  }
  .position-button.default-indicator {
    border-bottom: var(--border-width) solid var(--neon-blue, #00e6ff);
    box-shadow:
      0 0 0 1px rgba(0,230,255,0.25) inset,
      0 0 8px rgba(0,230,255,0.35);
  }
  
  /* Panel Unificado Responsive */
  .unified-controls-panel {
    grid-template-columns: 1fr;
    padding: 15px;
    margin: 0 10px 20px 10px;
  }
  
  .control-section {
    padding: 12px;
  }
  
  /* Ajustes móviles pequeños: reducir espaciado y mejorar targets */
  .audio-controls { margin: 6px 0; padding: 0; }
  .synth-display { --display-padding-y: 8px; padding: var(--display-padding-y); padding-left: 14px; padding-right: 14px; }
  button, .position-button, .audio-controls-unified button, .piano-section .piano-size-controls button {
    min-width: 48px;
    min-height: 48px;
  }
  
  .control-section h3 {
    font-size: 1em;
  }
  
  .search-container-unified {
    flex-direction: column;
  }
  /* Evitar que el input tome altura excesiva en columna */
  .search-container-unified input {
    width: 100%;
    flex: 0 0 auto;
    height: auto;
  }
  
  .audio-controls-unified {
    flex-direction: column;
  }
  
  .audio-controls-unified button {
    min-width: auto;
  }
  
  .volume-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .display-controls {
    flex-direction: column;
  }
  
  /* Pantalla digital flotante en móviles */
  .synth-display {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content; /* deduce ancho según contenido */
    max-width: calc(100vw - 16px); /* límite en móviles */
    min-width: 300px; /* evitar que sea demasiado pequeño */
    display: inline-block; /* respeta ancho de contenido */
    margin: 0;
    z-index: 999; /* debajo del menú móvil (1000), encima del contenido */
    --display-padding-y: 8px; /* sincroniza cálculo de altura en móviles */
    padding: var(--display-padding-y); /* vertical */
    padding-left: 14px; /* +6px por lado = +12px ancho total */
    padding-right: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    touch-action: auto; /* permitir scroll, el asa controlará el arrastre */
    will-change: transform; /* optimización de rendimiento para transform */
  }

  .display-screen { padding: 8px; }
  .display-line.primary { font-size: 1rem; }
  .display-line.secondary { font-size: 0.8rem; }
  .volume-corner { font-size: 0.6rem; padding: 0px 4px; }
  /* En móviles, reducir el tamaño del botón Next (solo móvil) */
  @media (max-width: 767px) {
    .next-chord-button {
      width: 28px;
      min-width: 28px; /* evita que la regla genérica (min-width:48px) lo ensanche */
      height: 28px;
      min-height: 28px; /* evitar que la regla base fuerce 44px+ */
      aspect-ratio: 1 / 1; /* fuerza proporción exacta para mantener forma circular */
      box-sizing: border-box; /* incluye borde en el cálculo del tamaño */
      padding: 0;
      border-radius: 50%;
      font-size: 0; /* ocultar texto en móvil, usamos aria-label */
      bottom: 2px; /* casi pegado al borde interno */
      right: 4px;  /* deja un pequeño margen a la derecha */
      /* Estilo idéntico al botón de huella digital */
      background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.7) 100%) !important;
      border: 1px solid rgba(255,255,255,0.85) !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 2px rgba(255,255,255,0.6) !important;
      text-shadow: none !important;
      backdrop-filter: none !important;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
    }
    .next-chord-button::after {
      content: '⏭'; /* símbolo Next claro y centrado */
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px; /* look más discreto dentro del círculo de 28px */
      line-height: 1;
      color: rgba(0,0,0,0.65); /* igual al icono de la huella */
      transform: scale(1.0);
      pointer-events: none;
    }
    .next-chord-button:hover {
      box-shadow: 0 3px 8px rgba(0,0,0,0.28), inset 0 1px 2px rgba(255,255,255,0.65) !important;
      transform: translateY(-1px);
    }
    .next-chord-button:active {
      box-shadow: 0 2px 5px rgba(0,0,0,0.22), inset 0 1px 2px rgba(255,255,255,0.55) !important;
      transform: translateY(0);
    }
  }

  /* Botón flotante ocultar/mostrar */
  .display-toggle {
    position: fixed;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    z-index: 1000;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 999px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
  }
  .display-toggle:hover { transform: translateY(-1px); }
  .display-toggle:active { transform: translateY(0); }

  /* Botón flotante Reproducir acorde (móvil) */
  .play-chord-floating {
    position: fixed;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom) + 90px); /* por encima del display flotante */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #27ae60;
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    z-index: 1000;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
  }
  .play-chord-floating:hover { box-shadow: 0 16px 36px rgba(0,0,0,0.45); }
  .play-chord-floating:active { transform: scale(0.96); }
  .play-chord-floating i { font-size: 22px; line-height: 1; }

  /* Ocultar botón de texto en controles unificados cuando hay flotante */
  .audio-controls-unified #play-chord { display: none; }

  /* Asa de arrastre en el display */
  .drag-handle {
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.7) 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 2px rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.85);
    cursor: grab;
    touch-action: none; /* evitar scroll mientras se arrastra desde el asa */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
  }
  .drag-handle i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 26px; /* llenar el círculo de 28px */
    line-height: 1;
    color: rgba(0,0,0,0.65);
    transform: scale(1.06);
    pointer-events: none;
    z-index: 1; /* sobre el motivo de huella */
  }
  .synth-display.dragging .drag-handle { cursor: grabbing; }
  .synth-display.dragging { will-change: transform; }

  /* Detalle de “huella digital” con anillos concéntricos */
  .drag-handle::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: repeating-radial-gradient(
      circle at 50% 50%,
      rgba(0,0,0,0.25) 0px,
      rgba(0,0,0,0.25) 1px,
      rgba(0,0,0,0.0) 3px,
      rgba(0,0,0,0.0) 6px
    );
    opacity: 0.55;
    z-index: 0;
  }

  /* Espacio para que el contenido no quede oculto bajo el display */
  .container {
    padding-bottom: 140px; /* altura aproximada del display flotante */
  }

}

/* iPads y tablets específicas */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}

/* Orientación horizontal en móviles */
@media (max-height: 500px) and (orientation: landscape) {
  .container {
    padding: var(--spacing-xs);
  }
  
  header {
    padding: var(--spacing-sm) 0;
  }
  
  header h1 {
    margin-bottom: var(--spacing-sm);
  }
  
  
  .audio-controls {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}

/* Pantallas de alta resolución */
@media (min-width: 1400px) {
  :root {
    --container-max-width: 1320px;
  }
  
}

/* Soporte para modo oscuro */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
  
  .chord-info, 
  .chord-positions,
  .chord-button {
    background-color: #1e1e1e;
    color: #e0e0e0;
  }
  
  .position-tab {
    background-color: #2d2d2d;
  }
  
  .position-button {
    color: #e0e0e0;
  }
  
  .position-button.active {
    background-color: #1e1e1e;
    color: #ffffff;
    border-bottom-color: var(--neon-blue, #00e6ff);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.06) inset,
      0 0 10px rgba(0,230,255,0.12);
  }
  .position-button.default-indicator {
    background-color: #1e1e1e;
    border-bottom-color: var(--neon-blue, #00e6ff);
    box-shadow:
      0 0 0 1px rgba(0,230,255,0.25) inset,
      0 0 8px rgba(0,230,255,0.35);
    color: #e0e0e0;
  }
  
  #search-input {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #444;
  }
  
}

/* Mejoras de accesibilidad */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Soporte para impresión */
@media print {
  .audio-controls,
  .search-container,
  #toggle-debug,
  .piano-size-controls {
    display: none !important;
  }
  
  body {
    background-color: white;
    color: black;
  }
  
  .container {
    max-width: 100%;
    width: 100%;
  }
  
  .chord-info,
  .chord-positions {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* =======================
   Lista de Acordes Toggle
   ======================= */
.chord-list-toggle {
  display: flex;
  justify-content: center;
  margin: var(--spacing-md) 0 var(--spacing-sm) 0;
}

.toggle-chords {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--spacing-lg);
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  /* Paleta neón accesible */
  --neon-green: #39ff14;
  --neon-blue: #00e6ff;
  --neon-pink: #ff1bf5;
  background: #0e0f12;
  color: #eaffea;
  border: 1px solid var(--neon-blue);
  box-shadow:
    0 0 0 1px rgba(0,230,255,0.35) inset,
    0 0 8px rgba(0,230,255,0.6),
    0 0 16px rgba(0,153,255,0.35);
  text-shadow: 0 0 6px rgba(0,230,255,0.45);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease;
}

/* Halo externo con gradiente neón */
.toggle-chords::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: radial-gradient(60% 120% at 50% 50%, rgba(0,230,255,0.45), rgba(57,255,20,0.2) 60%, rgba(255,27,245,0.15) 100%);
  filter: blur(6px);
  z-index: -1;
  opacity: 0.7;
}

.toggle-chords:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,230,255,0.45) inset,
    0 0 10px rgba(0,230,255,0.75),
    0 0 22px rgba(0,153,255,0.45);
}

.toggle-chords:active {
  transform: scale(0.98);
}

/* Estado activo: cuando la lista está expandida */
.toggle-chords[aria-expanded="true"] {
  border-color: var(--neon-blue);
  color: #f3fbff;
  text-shadow: 0 0 6px rgba(0,230,255,0.55);
  box-shadow:
    0 0 0 1px rgba(0,230,255,0.35) inset,
    0 0 10px rgba(0,230,255,0.7),
    0 0 22px rgba(0,153,255,0.4);
  animation: neonFlicker 2.6s ease-in-out infinite alternate;
}

.toggle-chords[aria-expanded="true"]::before {
  background: radial-gradient(60% 120% at 50% 50%, rgba(0,230,255,0.5), rgba(0,153,255,0.35) 60%, rgba(57,255,20,0.2) 100%);
  opacity: 0.85;
}

/* Accesibilidad: foco visible */
.toggle-chords:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.9),
    0 0 0 6px rgba(0,230,255,0.6),
    0 0 18px rgba(0,153,255,0.45);
}

/* Animaciones sutiles */
@keyframes neonFlicker {
  0% { opacity: 0.95; filter: brightness(1); }
  45% { opacity: 0.98; filter: brightness(1.05); }
  50% { opacity: 0.92; filter: brightness(0.98); }
  100% { opacity: 1; filter: brightness(1.08); }
}

/* Respeto a usuarios con motion reducido */
@media (prefers-reduced-motion: reduce) {
  .toggle-chords[aria-expanded="true"] { animation: none; }
}

.chord-list {
  overflow: hidden; /* sin barras de scroll internas */
  height: 0; /* oculta por defecto */
  opacity: 0;
  transition: height 280ms ease, opacity 200ms ease;
  will-change: height, opacity;
}

.chord-list.open {
  opacity: 1;
}

/* =======================
   Vitrina estática (Séptimas)
   ======================= */
/* (Se removieron estilos de la vitrina estática para volver a la versión anterior) */

.chord-list .chord-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-sm);
}

/* Desktop: aumentar densidad y uso de ancho completo */
@media (min-width: 1024px) {
  .chord-list {
    width: 100%;
  }
  .chord-list .chord-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
  }
  /* Tarjeta compacta, sin recortar contenido */
  .chord-button { padding: 6px 8px; min-height: 64px; }
  .chord-button .icon { width: 28px; height: 28px; }
  .chord-button .label {
    display: block;
    margin-top: 4px;
    font-size: var(--font-size-sm);
  }
}

/* Extra grandes: ocupar más ancho para reducir scroll vertical */
@media (min-width: 1440px) {
  :root {
    --container-max-width: 1800px;
  }
  .unified-controls-panel { max-width: 1600px; }
  .chord-list .chord-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
  }
  .chord-button { padding: 6px 8px; min-height: 60px; }
  .chord-button .icon { width: 24px; height: 24px; }
}

@media (max-width: 767px) {
  .chord-list-toggle {
    margin: var(--spacing-sm) 0;
  }
  .toggle-chords {
    min-height: 48px;
    padding: 0 var(--spacing-md);
    font-size: 0.95rem;
  }
  .chord-list .chord-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-xs);
  }
}

@media (max-width: 480px) {
  .chord-list .chord-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
}
.knob-shading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* Sombras e iluminación dinámicas basadas en ángulo y fuerza */
  background: conic-gradient(from var(--knob-angle),
    rgba(0,0,0,var(--shadow-strength)) 0deg,
    rgba(0,0,0,0) 140deg,
    rgba(255,255,255,var(--highlight-strength)) 200deg,
    rgba(255,255,255,0) 340deg
  );
  transition: background 140ms ease-out, opacity 140ms ease-out;
  opacity: 1;
}
/* Glow compartido: botones del header (Funcionamiento y Tomar un descanso) */
.panel-header .break-toggle,
.help-toggle {
  box-shadow:
    0 0 0 1px rgba(41,128,185,0.20) inset,
    0 0 8px rgba(41,128,185,0.50),
    0 4px 12px rgba(0,0,0,0.25);
  text-shadow: 0 0 6px rgba(41,128,185,0.35);
}
.panel-header .break-toggle:hover,
.help-toggle:hover {
  box-shadow:
    0 0 0 1px rgba(41,128,185,0.30) inset,
    0 0 12px rgba(41,128,185,0.70),
    0 6px 18px rgba(0,0,0,0.30);
}
.panel-header .break-toggle:active,
.help-toggle:active {
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(41,128,185,0.15) inset,
    0 0 6px rgba(41,128,185,0.45),
    0 3px 10px rgba(0,0,0,0.25);
}
.panel-header .break-toggle:focus-visible,
.help-toggle:focus-visible {
  outline: 3px solid rgba(41,128,185,0.35);
  outline-offset: 2px;
}
/* Botón: Restablecer (Pantalla Digital | Ajustes) */
#display-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  padding: 2px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(180deg, #3fa3dc 0%, #2e7fb8 100%);
  border: 1px solid #2e7fb8;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.18),
    0 0 0 1px rgba(41,128,185,0.16) inset,
    0 0 6px rgba(41,128,185,0.28);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-fast),
    background-color var(--transition-fast),
    opacity var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Botón: Party (Pantalla Digital | Ajustes) */
#display-party.party-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: #0affff;
  /* Fondo inactivo: estático y sobrio */
  background: #0e0f12;
  border: none;
  box-shadow: none;
  transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease, border-color 160ms ease, color 160ms ease;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* asegura orden de capas predecible */
  margin: 0; /* posición normal en su bloque */
  align-self: center; /* centrar si el contenedor padre es flex */
}

/* Layout de controles de Pantalla Digital: 2 columnas con Party a la derecha */
.control-section.display-section .display-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
}
/* Altura (columna izquierda) */
.control-section.display-section .display-controls .setting:nth-child(1) { grid-column: 1; }
/* Modo compacto (columna derecha) */
.control-section.display-section .display-controls .setting:nth-child(2) { grid-column: 2; justify-self: start; }
/* Color del texto (columna izquierda) */
.control-section.display-section .display-controls .setting:nth-child(3) { grid-column: 1; }
/* Party (columna derecha, misma fila que color) */
.control-section.display-section .display-controls .setting:nth-child(4) { grid-column: 2; justify-self: start; }
/* Ajuste fino: alinear el botón Party con el nivel del input de color */
.control-section.display-section .display-controls .setting:nth-child(4) { align-self: end; }
/* Restablecer ocupa todo el ancho y centrado al final */
.control-section.display-section .display-controls .reset-setting {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  justify-self: center; /* centrar el contenedor en el área de la grid */
  margin-top: 8px;
}

/* Responsive: en móviles apilar en una sola columna */
@media (max-width: 767px) {
  .control-section.display-section .display-controls {
    grid-template-columns: 1fr;
  }
  .control-section.display-section .display-controls .setting:nth-child(2),
  .control-section.display-section .display-controls .setting:nth-child(4) {
    grid-column: 1;
  }
}
/* Contenedor del botón Restablecer al fondo centrado */
.display-controls .reset-setting {
  display: flex;
  justify-content: center;
}
#display-party.party-toggle i {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.35));
}
#display-party.party-toggle:hover {
  color: #8bff00;
  filter: drop-shadow(0 0 4px rgba(139,255,0,0.8));
}
#display-party.party-toggle:active {
  transform: translateY(1px);
  filter: drop-shadow(0 0 6px rgba(10,255,255,0.9));
}
#display-party.party-toggle.active,
#display-party.party-toggle[aria-pressed="true"] {
  color: #ff00ff;
  filter: drop-shadow(0 0 6px rgba(255,0,255,0.9));
  /* Fondo activo: gradiente con acentos neón */
  background: linear-gradient(135deg,
    rgba(10, 255, 255, 0.12) 0%,
    rgba(11, 11, 20, 1) 50%,
    rgba(255, 0, 255, 0.12) 100%
  ), #0b0b14;
}

/* Limitar el largo del botón Restablecer para que sea más compacto */
#display-reset { width: auto; max-width: 220px; }

/* Borde animado tipo neon continuo */
#display-party.party-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  --border-w: 2px;
  background: conic-gradient(
    from 0deg,
    #0affff 0%,
    #8bff00 25%,
    #ff00ff 50%,
    #ffea00 75%,
    #0affff 100%
  );
  /* Sin animación por defecto; oculto cuando inactivo */
  animation: none;
  opacity: 0;
  transition: opacity 160ms ease;
  /* Crear anillo: máscara para vaciar el centro */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--border-w)), #000 calc(100% - var(--border-w) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--border-w)), #000 calc(100% - var(--border-w) + 1px));
  pointer-events: none;
  z-index: 0; /* debajo del contenido del botón */
}

/* Activo: mostrar borde neón estático (sin movimiento) */
#display-party.party-toggle.active::before,
#display-party.party-toggle[aria-pressed="true"]::before {
  opacity: 1;
  animation: partyNeonSpin 4s linear infinite;
}

@keyframes partyNeonSpin {
  to { transform: rotate(360deg); }
}

/* Canvas del modo Party sobre la pantalla digital */
.display-screen .party-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: screen;
}

#display-reset::before {
  content: "↺";
  font-size: 1rem;
  line-height: 1;
  opacity: 0.9;
}

#display-reset:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.28),
    0 0 0 1px rgba(41,128,185,0.26) inset,
    0 0 12px rgba(41,128,185,0.55);
}

#display-reset:active {
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.22),
    0 0 0 1px rgba(41,128,185,0.18) inset,
    0 0 6px rgba(41,128,185,0.35);
}

#display-reset:focus-visible {
  outline: 3px solid rgba(41,128,185,0.35);
  outline-offset: 2px;
}

/* =============================
   Ajustes táctiles y tipografía
   ============================= */
/* Hover táctil: neutraliza efectos de hover en pantallas táctiles */
@media (hover: none) and (pointer: coarse) {
  .help-toggle:hover,
  .panel-header .break-toggle:hover,
  #break-close:hover,
  .toggle-chords:hover,
  .help-print:hover,
  .help-close:hover,
  #search-button:hover,
  #display-reset:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
  /* Mantener color base para evitar parpadeos de color en táctiles */
  .help-toggle:hover { background-color: #3498db !important; }
  .panel-header .break-toggle:hover { background-color: var(--color-secondary) !important; }
  #break-close:hover { background-color: #3498db !important; }
}

/* Tipografía: legibilidad mejorada en móviles */
@media (max-width: 767px) {
  body { line-height: 1.6; }
  p, li { line-height: 1.6; }
  .help-panel p, .help-panel li { font-size: 0.95rem; }
}

@media (max-width: 480px) {
  header h1, .brand-row h1 { font-size: 1.3rem; }
  .help-header h2 { font-size: 1.1rem; }
  .chord-info h2 { font-size: 1.05rem; }
}
/* Party canvas full overlay (ensures full width/height usage) */
.display-screen {
  position: relative;
}
.display-screen .party-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.volume-corner { /* visible: el indicador de volumen debe mostrarse */ }
/* Mejora de legibilidad para la lista del panel de Funcionamiento */
.help-feature .help-list {
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: var(--spacing-md, 16px);
}

/* =============================
   Alineación precisa de botones del header (solo móviles)
   ============================= */
@media (max-width: 767px) {
  .panel-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .panel-header .help-toggle,
  .panel-header .break-toggle {
    margin-left: auto;
    margin-right: auto;
    max-width: 280px; /* móvil: un poco más ancho */
    font-size: 0.9rem; /* unificar tamaño de fuente */
  }
}

/* Límites de ancho fuera de móvil (sin centrar) */
.panel-header .help-toggle,
.panel-header .break-toggle {
  max-width: 360px; /* escritorio */
}
@media (max-width: 1023px) {
  .panel-header .help-toggle,
  .panel-header .break-toggle {
    max-width: 320px; /* tablet */
  }
}

/* Separación entre los botones del header en tablet/escritorio */
@media (min-width: 768px) {
  .panel-header .help-toggle { margin-right: 20px; }
}

/* (Eliminado) Separación adicional en escritorio entre botones del header */

/* (removido) estilos del overlay de cuenta regresiva */