/* Ajustes de pantalla táctil para toda la app (tienda, live y panel).
 *
 * El viewport traía maximum-scale=1 y user-scalable=no para frenar dos
 * zooms molestos, pero a cambio nadie podía acercar la pantalla con los
 * dedos. Estas reglas frenan esos dos zooms por separado y permiten quitar
 * aquel bloqueo:
 *
 *  - touch-action: manipulation anula el zoom por doble toque y conserva el
 *    pellizco para acercar.
 *  - iOS acerca la pantalla al enfocar un campo con letra menor de 16px; los
 *    campos del panel tenían 13 y 14px.
 */

html {
  touch-action: manipulation;
}

@media (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Botones tipo pastilla (filtros de Pedidos y similares): llevan los
     estilos en línea y sin clase, por eso se apuntan por atributo. Medían
     32px de alto; 40px es lo mínimo cómodo para el dedo. */
  button[style*="border-radius: 20px"] {
    min-height: 40px !important;
  }
}

/* Panel en el celular (hasta 640px).
 *
 * En filas con datos a la izquierda y botones a la derecha, la columna de
 * datos se encogía hasta casi nada y su texto se salía encima de los botones:
 * en Mis salas, el nombre de la sala quedaba debajo de "Ver"; en Pedidos, el
 * correo de la clienta encima de la fecha. Aquí los datos van en su propio
 * renglón, a todo lo ancho, y lo demás abajo o arriba. Además el panel dejaba
 * 28px de margen a cada lado, casi una sexta parte de un celular de 360px.
 * Esos bloques no tienen clase, así que se apuntan por su estilo en línea,
 * como los botones de arriba.
 */
@media (max-width: 640px) {
  main[style*="padding: 28px"] {
    padding: 20px 14px !important;
  }

  /* Título con botón al lado (Programar, Mis salas…): si no cabe, el botón
     baja en vez de apretar el título. */
  main div[style*="justify-content: space-between"][style*="align-items: center"] {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  main h1[style*="font-size: 22px"] {
    font-size: 20px !important;
  }

  /* Mis salas: nombre y clave de la sala arriba, botones abajo. */
  div[style*="flex-wrap: wrap"] > div[style*="flex: 1 1 0%"][style*="min-width: 0px"]:first-child {
    flex-basis: 100% !important;
  }

  /* Pedidos: estado, total y fecha arriba; clienta y correo abajo. */
  div[style*="cursor: pointer"][style*="padding: 14px 16px"][style*="gap: 12px"] {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  div[style*="cursor: pointer"][style*="padding: 14px 16px"][style*="gap: 12px"] > div[style*="flex: 1 1 0%"][style*="min-width: 0px"] {
    order: 3;
    flex-basis: 100% !important;
    overflow-wrap: anywhere;
  }
  div[style*="cursor: pointer"][style*="padding: 14px 16px"][style*="gap: 12px"] > div[style*="text-align: right"] {
    margin-left: auto;
  }

  /* Mi perfil: la frase va debajo de la foto y a todo lo ancho; al lado
     quedaba angosta y cortaba el texto de ejemplo. */
  div[style*="flex: 1 1 0%"][style*="min-width: 200px"] {
    min-width: 100% !important;
  }
}