/* ═══════════════════════════════════════════════════════════════════════════
   T-0086 · EN UNA PANTALLA TÁCTIL: SIN ZOOM Y SIN DESPLAZAR LA PANTALLA DE LADO
   ───────────────────────────────────────────────────────────────────────────
   Juan, 23-09, con la foto de «Encargo nuevo» cortada por la derecha en su
   iPhone: «en cualquier pantalla táctil no se debe poder hacer zoom ni
   desplazamientos horizontales de pantallas completas, si acaso para navegar
   entre pestañas».
   Va en su hoja, la última, para que gane y se lea de un vistazo. El pellizco
   lo corta además `js/sinZoom.js`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Una ventana nunca es más ancha que la pantalla. El velo es una rejilla y su
   columna crecía hasta lo MÍNIMO que pedía el contenido (el pie con sus cuatro
   botones en fila): la ventana se salía por la derecha y había que arrastrarla
   de lado. Con la columna limitada, lo que no cabe se recoloca dentro. */
.velo{grid-template-columns:minmax(0, 1fr)}
.ventana{min-width:0; max-width:100%}

@media (max-width:560px){
  /* En el teléfono la ventana usa la pantalla: 28 px de margen por lado eran
     el 15 % del ancho. */
  .velo{padding:10px}
  .ventana{max-height:100%}
  .ventana.grande{height:100%}
  .ventana header{padding:14px 16px 10px}
  /* El pie baja de renglón en vez de empujar: la explicación arriba, entera, y
     los botones debajo repartiéndose el ancho. */
  .ventana footer{flex-wrap:wrap; padding:10px 12px; gap:8px}
  .ventana footer > .pista{flex:1 0 100%}
  .ventana footer > .pista:empty{display:none}
  .ventana footer > .crece{display:none}
  .ventana footer > .btn{flex:1 1 auto; white-space:nowrap}
  .nuevo-izq, .nuevo-der{padding:14px}
  .nuevo-izq .rotulo{flex-wrap:wrap}
}

@media (pointer:coarse){
  /* La pantalla entera no se desplaza de lado. `clip` corta lo que sobresalga
     sin volver la página una caja con su propio desplazamiento: las tiras de
     pestañas, que se arrastran ellas, siguen igual. */
  html, body{overflow-x:clip}

  /* El iPhone amplía la página al tocar un campo con letra de menos de 16 px, y
     luego no la devuelve. Aquí la letra de lo que se teclea no baja de ahí.
     `max(16px, 1em)` no encoge lo que ya era mayor. Fuera las casillas: ahí no
     se escribe. El `!important` es a propósito: es un límite del aparato, no un
     ajuste; una regla más concreta que lo bajara devolvería el zoom. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  textarea,
  select,
  [contenteditable]:not([contenteditable="false"]){font-size:max(16px, 1em) !important}
}