/* ================================================================
   Ajustes responsive compartidos para las herramientas de teoría.
   En pantallas chicas: config compacta y — sobre todo — NO fija,
   para que el contenido (mástil, diagramas, tablas) use toda la altura.
   Se enlaza DESPUÉS del <style> de cada herramienta para poder
   sobrescribir sus reglas (misma especificidad, gana el orden).
   ================================================================ */
@media (max-width: 640px) {
  header { padding: 14px 14px 6px; }
  header h1 { font-size: 17px; }
  header .sub, header .tuning { font-size: 12px; }

  /* La toolbar deja de quedar fija: se va con el scroll y el
     contenido gana la pantalla completa (fix principal en mobile). */
  .toolbar { position: static; padding: 9px 12px; gap: 8px; }

  .group { gap: 5px; }
  .group .lbl { min-width: 0; margin-right: 2px; }

  .chip, .toggle, .btn { padding: 5px 9px; font-size: 12px; }

  .tabs { padding: 10px 12px 0; }
}