/* =========================================================
LAYOUT / STRUCTURE (ESTABLE)
Este archivo define EXCLUSIVAMENTE:

* flujo vertical de la app
* áreas principales
* stacking contexts

NO colores finales
NO feedback
NO instrumento
========================================================= */

/* ===============================
ROOT APP LAYOUT
=============================== */

#app {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
}

/* ===============================
TOP UI / HEADER / TOOLBAR
=============================== */

header,
.top-bar,
.toolbar {
position: relative;
z-index: var(--z-ui, 50);
flex-shrink: 0;
}

/* ===============================
STAGE (SYNTHESIA + SPACE)
=============================== */

#synthesia {
position: relative;
height: 280px; /* altura visual clara */
overflow: hidden;
flex-shrink: 0;
}

/* ===============================
PIANO AREA
=============================== */

#piano-wrapper {
position: relative;
display: flex;
justify-content: center;
padding: 20px 0;
overflow-x: auto;
overflow-y: visible;
flex-shrink: 0;
}

#piano {
position: relative;
z-index: var(--z-piano, 10);
margin-left: 0 !important;
  display: inline-block;
}

/* ===============================
OVERLAYS (FEEDBACK / HUMO)
=============================== */

#piano-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: var(--z-feedback, 30);
}

/* ===============================
STAGE OVERLAY (FEEDBACK GLOBAL)
=============================== */

#fx-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 100;
}



.menu-left {
  display: flex;
  align-items: flex-start;
}

.menu-center {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.menu-right {
  display: flex;
  justify-content: flex-end;
}


/* ===============================
   TOP BAR – GRID MAESTRO
   =============================== */

.top-bar {
  display: grid;
  grid-template-columns:
    auto    /* Playback */
    1fr     /* Canción + Mano */
    auto    /* Tiempo */
    auto;   /* Teclado */
  align-items: start;
  column-gap: 32px;
  padding: 16px 24px;
}

.menu-control .menu-buttons {
  display: flex;
  gap: 8px;
}

.menu-song-hand {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

.menu-song-hand .menu-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-song-hand .keyboard-range-hint {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.75;
}

.menu-tempo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-tempo label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}


.top-grid {
  display: grid;
  grid-template-columns:
    auto   /* Playback */
    2fr    /* Canción */
    1fr    /* Mano */
    1.2fr  /* Tiempo */
    1.5fr  /* Teclado */
    auto;  /* ⚙ */
  align-items: start;
  gap: 24px;
}

.col .row {
  display: flex;
  gap: 8px;
}



/* ===============================
SAFETY / LEGACY NOTES
=============================== */

/*
NOTE:

* header / toolbar selectors are grouped to support
  different markup versions without breaking layout
* heights are explicit to avoid collapse when CSS is split
  */


  html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.main-container {
  flex: 1;
}