/* ============================================================================
   EL EDITOR

   La idea de fondo: esto no es un formulario, es un instrumento. Un instrumento
   tiene la parte que mirás siempre —la onda y el transporte— y la parte que
   cambiás de vez en cuando. Antes estaban las dos juntas: treinta y cuatro
   controles a la vista al mismo tiempo, en dos columnas donde uno quedaba
   huérfano y al lado suyo un hueco vacío.

   Ahora: la onda arriba, el transporte pegado abajo de la barra, y los controles
   detrás de cinco solapas de las que se ve UNA. De treinta y cuatro a diez.
   ========================================================================= */

/* El aire entre las partes del editor es --e3 y no --e4 a propósito: son seis
   filas, así que cada cuatro píxeles de más son veinticuatro de página. Y lo que
   se gana es que la onda, el transporte y los controles entren en una pantalla
   —que es todo el punto de haber puesto las solapas—. Medido: terminan en 887
   sobre una ventana de 900. */
.editor {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}

.editor__cabeza { display: flex; flex-direction: column; gap: var(--e1); }

.editor__titulo {
  font-size: var(--t-titulo);
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor__ficha {
  font-family: var(--tipo-num);
  font-size: var(--t-dato);
  color: var(--texto-3);
}

/* ------------------------------------------------------------------ onda --- */

.onda {
  position: relative;
  width: 100%;
  height: var(--onda-alto);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-panel);
  overflow: hidden;
  background: var(--fondo);
}
.onda canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.onda__ayuda {
  margin-top: calc(var(--e2) - var(--e4));  /* pegada a su onda, no al aire de la columna */
  font-size: var(--t-pie);
  color: var(--texto-3);
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
}
.onda__ayuda b { color: var(--texto-2); font-weight: 600; }
.onda__ayuda-corta { display: none; }

/* ============================================================== transporte ==
   Se pega justo abajo del encabezado, como en cualquier programa de música: el
   play y el reloj no se van de la pantalla nunca.

   OJO: `position: sticky` se muere EN SILENCIO si cualquier elemento que lo
   contenga tiene `overflow` distinto de `visible`. No tira error, no avisa:
   simplemente deja de pegarse. El día que alguien escriba `overflow-x: hidden`
   en el `body` para tapar un desborde de tres píxeles, esto deja de funcionar y
   nadie se entera. Hay una prueba que hace scroll hasta el fondo y comprueba
   que el botón de tocar sigue justo abajo de la barra.
   ========================================================================== */

.transporte {
  position: sticky;
  top: var(--alto-barra);
  z-index: 10;                 /* por debajo de la barra, que va en 20 */
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-panel);
}

.reloj {
  font-family: var(--tipo-num);
  font-size: var(--t-cuerpo);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.reloj span { color: var(--texto-3); }

.transporte__derecha { margin-left: auto; display: flex; gap: var(--e2); }

/* ================================================================ solapas ===
   Cinco lugares, se ve uno.

   REGLA DURA: nada que una prueba apriete puede vivir adentro de una solapa. El
   transporte y la barra de bajar quedan afuera, siempre a la vista. Está escrito
   también al lado del `role="tablist"` en app.html.

   Y los paneles NUNCA se sacan del DOM, sólo se ocultan. `editor.js` guarda
   cincuenta y cinco referencias a elementos que toma una sola vez al abrir el
   tema: un panel desmontado le deja la mano vacía y revienta mucho después, en
   otro lado. Hay una prueba que arrastra sobre la onda con la solapa de Recorte
   escondida y comprueba que el valor se actualizó igual.
   ========================================================================== */

.solapas {
  display: flex;
  gap: var(--e1);
  padding: var(--e1);
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-pastilla);
  overflow-x: auto;
  scrollbar-width: none;
}
.solapas::-webkit-scrollbar { display: none; }

/* Las solapas se miden por su texto y quedan a la izquierda, como en cualquier
   programa de música. Estiradas a todo el ancho parecerían el selector de una
   aplicación de teléfono, que es justo lo que esto no es. */
.solapa {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--e4);
  font-family: var(--tipo);
  font-size: var(--t-dato);
  font-weight: 500;
  color: var(--texto-3);
  background: transparent;
  border: none;
  border-radius: var(--radio-pastilla);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--rapido), background var(--rapido);
}
.solapa:hover { color: var(--texto-2); }
.solapa[aria-selected="true"] {
  color: var(--texto);
  background: var(--superficie-alta);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--borde-suave);
}

/* Un puntito al lado del nombre cuando esa solapa tiene algo cambiado. Es lo
   que evita tener que abrir las cinco para saber dónde tocaste. */
.solapa[data-tocada="si"]::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: var(--e2);
  border-radius: 50%;
  background: var(--acento);
  vertical-align: middle;
}

.solapa-hoja {
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-panel);
}

/* -------------------------------------------------------------- controles -- */

/* El panel ya no dibuja su propia caja: la caja es la hoja de la solapa. Dos
   paneles adentro de la misma hoja se separan con una línea, no con dos marcos
   uno adentro del otro. */
.panel { display: flex; flex-direction: column; gap: var(--e3); }
.panel + .panel {
  margin-top: var(--e5);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde-suave);
}

.panel__titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  font-size: var(--t-pie);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.panel__valor {
  font-family: var(--tipo-num);
  font-size: var(--t-dato);
  color: var(--acento);
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Deslizador */
.dial { display: flex; align-items: center; gap: var(--e3); }
.dial__rotulo {
  min-width: 56px;
  font-size: var(--t-pie);
  color: var(--texto-3);
}
/* El deslizador es alto aunque el riel se vea finito: la línea de 4 píxeles es
   lo que se DIBUJA, y los 26 de alto son lo que se puede AGARRAR. Antes el
   elemento entero medía 4 píxeles, o sea que había que acertarle con el mouse a
   una línea — con el dedo, imposible. */
.dial input[type="range"] {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  background: transparent;
  outline: none;
  cursor: pointer;
}
.dial input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--superficie-alta);
  border-radius: var(--radio-pastilla);
}
.dial input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  margin-top: -7px;              /* centra el tirador sobre el riel de 4 px */
  background: var(--acento);
  border-radius: 50%;
  cursor: grab;
  border: 2px solid var(--fondo);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--fondo) 80%, transparent);
  transition: transform var(--rapido);
}
.dial input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.dial input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.2); }

.numerito {
  width: 72px;
  min-height: 36px;
  padding: var(--e2);
  font-family: var(--tipo-num);
  font-size: var(--t-dato);
  text-align: right;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-control);
  font-variant-numeric: tabular-nums;
}
.numerito:focus { outline: none; border-color: var(--acento); }

.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }

.nota {
  font-size: var(--t-pie);
  line-height: 1.45;
  color: var(--texto-3);
}

/* ============================================================== LOS PADS ====
   Dieciséis cuadrados, como en cualquier sampler.

   Hasta hoy NO TENÍAN UNA SOLA LÍNEA DE ESTILO: `editor.js` los venía armando
   con sus clases desde siempre y ninguna hoja las nombraba, así que salían como
   dieciséis botones grises del navegador, uno al lado del otro. La función que
   convierte esto en un instrumento estaba, literalmente, sin dibujar.

   Y el destello del que suena —que el código sí marca— no se veía.
   ========================================================================== */

/* Cuatro columnas, siempre: son cuatro porque las dieciséis teclas del teclado
   que las tocan están en cuatro filas de cuatro. Pero con tope de tamaño y
   centrados — estirados a todo el ancho de un monitor grande, un pad mide
   doscientos píxeles y deja de parecer un instrumento. */
.pads {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 124px));
  justify-content: center;
  gap: var(--e2);
}

.pad {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  aspect-ratio: 1;
  min-height: 56px;
  padding: var(--e2);
  background: var(--superficie-alta);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-pad);
  color: var(--texto-2);
  font-family: var(--tipo);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--rapido), background var(--rapido),
              color var(--rapido), transform var(--rapido);
}
.pad:hover:not(:disabled) {
  border-color: var(--acento-borde);
  background: var(--acento-suave);
  color: var(--texto);
}
.pad:active:not(:disabled) { transform: scale(0.97); }

/* Un lugar vacío del banco: se ve que está y que no tiene nada. No se esconde,
   porque su tecla del teclado sigue siendo esa aunque no suene, y una fila que
   desaparece se lee como un error de dibujo. */
.pad:disabled {
  background: transparent;
  border-style: dashed;
  border-color: var(--borde-suave);
  color: var(--texto-3);
  cursor: default;
}

/* La tecla del teclado, arriba a la izquierda, en cifras de máquina de escribir
   para que se lea como lo que es: una tecla. */
.pad__tecla {
  font-family: var(--tipo-num);
  font-size: var(--t-pie);
  font-weight: 600;
  color: var(--texto-3);
  letter-spacing: 0.04em;
}
/* El número del pedazo, grande y en el medio: es lo que mirás al tocar. */
.pad__num {
  margin: auto;
  font-size: var(--t-titulo);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Cuánto dura, abajo. Chiquito: sirve para comparar de un vistazo, no para leer. */
.pad__largo {
  font-family: var(--tipo-num);
  font-size: var(--t-pie);
  color: var(--texto-3);
  align-self: flex-end;
}
.pad:hover:not(:disabled) .pad__tecla,
.pad:hover:not(:disabled) .pad__largo { color: var(--texto-2); }

/* El que está sonando. Prende del color de la casa y se apaga solo: entre
   dieciséis cuadrados iguales, es lo único que dice cuál sonó. */
.pad[data-sonando="si"] { animation: destello 620ms var(--curva); }
@keyframes destello {
  0%   { background: var(--acento);       border-color: var(--acento);       color: var(--fondo); }
  50%  { background: var(--acento-suave); border-color: var(--acento-borde); color: var(--texto); }
  100% { background: var(--superficie-alta); border-color: var(--borde-suave); color: var(--texto-2); }
}

.banco {
  font-size: var(--t-pie);
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- descargar --- */

.salida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  padding-top: var(--e5);
  border-top: 1px solid var(--borde-suave);
}
.salida__nombre {
  flex: 1;
  min-width: 200px;
  font-family: var(--tipo-num);
  font-size: var(--t-dato);
  color: var(--texto-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}