/* ============================================================================
   LOS TRES ANCHOS DE PANTALLA

   Hasta hoy no había NINGUNO: la única `@media` de todo el proyecto era la de
   "menos movimiento". En una ventana angosta el editor se desbordaba y no había
   forma de tocar nada con el dedo.

   POR QUÉ ESTÁN TODOS ACÁ Y NO AL PIE DE CADA PIEZA
   -------------------------------------------------
   CSS no deja escribir `@media (max-width: var(--corte))`. Los números 1100,
   780 y 520 se van a repetir como números pelados sí o sí. Si están
   desparramados por seis archivos, dentro de seis meses hay un cuarto corte en
   900 que nadie decidió — que es exactamente como aparecieron los diez tamaños
   de letra. Juntos, se ven de un vistazo, y `tests/estilo.test.js` los cuenta.

   POR QUÉ EXISTE EL ANCHO DE CELULAR SI EN EL CELULAR NO HAY EXTENSIONES
   ---------------------------------------------------------------------
   Chrome en Android no soporta extensiones y no lo va a soportar. Pero este
   mismo editor es el que va a ser la herramienta en la web, y una ventana
   angosta en la computadora tiene exactamente el mismo problema. Se escribe una
   vez y sirve dos veces.
   ========================================================================= */

/* ------------------------------------------------- menos de 1100: una columna */

@media (max-width: 1100px) {
  .hoja { padding: var(--e5) var(--e4) var(--e6); }
  :root { --onda-alto: 180px; }
}

/* --------------------------------------- menos de 780: se acomoda el editor -- */

@media (max-width: 780px) {
  :root { --onda-alto: 160px; }

  /* La ayuda de la onda en dos renglones: en una línea se corta y no se lee. */
  .onda__ayuda { flex-direction: column; gap: var(--e1); }

  .solapa-hoja { padding: var(--e4); }
  .solapa { padding: 0 var(--e3); }
  .calidades { grid-template-columns: repeat(2, 1fr); }
  .calidad__nota { display: none; }
}

/* ---------------------------------------------- menos de 520: con el dedo ---- */

@media (max-width: 520px) {
  /* La letra sube en pantalla chica. Y hay un motivo que no es estético: si un
     campo de texto tiene menos de 16 píxeles, el celular hace zoom solo al
     tocarlo y te deja la pantalla corrida. */
  :root {
    --t-pie:     12px;
    --t-dato:    13px;
    --t-cuerpo:  16px;
    --t-titulo:  18px;
    --t-portada: 24px;
    --onda-alto: 150px;
  }

  .hoja { padding: var(--e4) var(--e3) var(--e5); }
  .calidades { grid-template-columns: 1fr; }
  .calidad__nota { display: block; }

  /* Todo lo que se toca llega al mínimo de 44 píxeles, que es lo que mide la
     yema de un dedo. Antes lo cumplían tres controles de cuarenta.

     Y DE ANCHO TAMBIÉN, no sólo de alto. Un botón de 44 de alto y 40 de ancho
     es igual de difícil de acertar, y son justo los cortitos —"1×", "2×",
     "A"— los que quedaban abajo. Lo encontró `npm run auditar` el 2026-09-02,
     la primera vez que se corrió: `pantallas.mjs` sólo miraba el alto. */
  .tecla, .solapa, .boton, .numerito, .pad { min-height: 44px; }
  .tecla, .tecla--preset { min-width: 44px; }
  /* Los pads pasan a ocupar el ancho de la pantalla: en un teléfono los
     dieciséis tienen que caber y tocarse con el pulgar. */
  .pads { grid-template-columns: repeat(4, 1fr); }
  .numerito { width: 84px; font-size: var(--t-cuerpo); }
  .dial input[type="range"] { height: 44px; }

  /* El transporte se va abajo del todo, donde llega el pulgar, y se queda ahí:
     no cuando el scroll lo alcanza, sino siempre. Por eso acá es `fixed` y no
     `sticky`. */
  .transporte {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    border-radius: var(--radio-panel) var(--radio-panel) 0 0;
    border-bottom: none;
    padding: var(--e2) var(--e3);
    padding-bottom: calc(var(--e2) + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--fondo) 85%, transparent);
  }
  /* Sin esto, el último control del editor queda debajo de la barra de abajo y
     no se puede apretar nunca. */
  .editor { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* "Reiniciar" no entra al lado de los otros cinco. Se vuelve un icono POR
     ESTILO, sin tocar el marcado: el texto sigue estando para quien navega con
     un lector de pantalla. */
  #limpiar { font-size: 0; min-width: 44px; }
  #limpiar::after { content: '↺'; font-size: var(--t-cuerpo); }

  /* Los botones de bajar van UNO POR RENGLÓN, no todos apretados.
     Apretados, "Descargar WAV" y "Traer otro" se partían en dos líneas cada uno
     —"Descargar / WAV"— que es la forma más rápida de que algo se vea mal hecho.

     EL `nowrap` NO SOBRA, aunque acá ya sea una columna. `.salida` viene con
     `flex-wrap: wrap`, y una columna que además envuelve arma VARIAS columnas:
     entonces el ancho de cada una lo fija el elemento más ancho de esa columna,
     y `align-items: stretch` estira hasta ESE ancho, no hasta el de la
     pantalla. Resultado: el nombre del archivo, que es `nowrap` con puntos
     suspensivos, deja de recortarse y se desborda de costado.
     Se vio de verdad el 2026-09-02: al medir el BPM solo, el nombre pasó a
     llevar `[200BPM Am]` adentro, creció a 449 píxeles y se salió de una
     pantalla de 420. El nombre era más largo, pero el defecto estaba desde
     antes esperando un texto que no entrara. */
  .salida { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .salida .boton { width: 100%; }
  .salida__nombre { min-width: 0; text-align: center; }

  /* Con el dedo no hay rueda ni doble clic: se muestra la ayuda que sí sirve. */
  .onda__ayuda-larga { display: none; }
  .onda__ayuda-corta { display: block; }

  /* En 390 píxeles los seis controles del transporte no entran de ninguna
     manera. Lo que sobra es la duración total, que ya está escrita arriba, en
     la ficha del tema. El elemento sigue existiendo para quien navega con un
     lector de pantalla y para las pruebas. */
  .reloj__resto { display: none; }
  .transporte { gap: var(--e2); }
  .transporte .tecla { min-width: 44px; padding: 0 var(--e2); }
}