/* #13 pieza 1 — en mobile el prospecto no tiene tarea.
 *
 * El recorrido de la demo terminaba pidiéndole al visitante que arrastrara una planilla. En una
 * computadora es tedioso; en un teléfono es IMPOSIBLE: no hay dónde editar el archivo ni cómo
 * devolverlo. Y se le estaba pidiendo trabajo a alguien que todavía no pagó — el esfuerzo llegaba
 * antes que el valor.
 *
 * La pantalla se queda, porque es funcionalidad real y muestra producto. Lo que cambia es que en
 * el teléfono deja de pedir el gesto y ofrece el camino que sí lleva a algún lado.
 *
 * EL BOTÓN SE INSERTA, NO SE INTERCAMBIA POR CSS SOLAMENTE. Si acá sólo se escondiera la zona de
 * arrastre, la pantalla quedaría sin salida en mobile: un cartel que no se puede accionar, que es
 * peor que la tarea imposible. El botón nace con `display:none` en el markup y esta hoja lo
 * enciende; si la hoja no cargara, el visitante ve la zona de arrastre de siempre y no dos
 * caminos al mismo tiempo.
 */

@media (max-width: 767px) {
  [data-carga-mobile] {
    display: flex !important;
  }

  /* La zona de arrastre y la bajada de la plantilla salen del camino. La plantilla sigue siendo
   * un enlace válido en escritorio —para quien quiera adelantar trabajo— pero no puede ser lo que
   * cierra el recorrido en un teléfono. */
  [data-drop],
  [data-fila-plantilla] {
    display: none !important;
  }
}

/* Los módulos 01 / 02 / 03: el número y su estado, separados.
 *
 * La fila usa `justify-content: space-between`, que en escritorio manda el número a un borde y el
 * estado al otro. En mobile la tarjeta centra su contenido y esa fila —hija de un contenedor en
 * columna con `align-items: center`— se encoge a su contenido: sin espacio libre, "space-between"
 * no tiene nada que repartir y "01" queda pegado al punto de "Disponible".
 *
 * Es la misma trampa que ya está anotada en NOTAS —un hijo flex de una columna centrada
 * shrink-to-fit—, apareciendo en otro lugar. Se resuelve con separación explícita en vez de
 * estirar la fila a todo el ancho: estirarla mandaría los dos extremos contra los bordes y
 * rompería el centrado que la tarjeta tiene a propósito en el teléfono.
 */
@media (max-width: 767px) {
  [style*="min-height: 250px"] > [style*="justify-content: space-between"] {
    gap: 12px;
  }
}

/* La métrica al pie de cada módulo, centrada.
 *
 * La fila es número + rótulo con `align-items: baseline`. En escritorio arranca a la izquierda y
 * el rótulo entra en una línea. En el teléfono la tarjeta centra todo su contenido menos esta
 * fila, que se quedaba pegada a la izquierda con el rótulo partido en tres líneas colgando: la
 * única pieza descentrada de una tarjeta centrada se lee como un error de armado.
 *
 * Se centra la fila y también el texto del rótulo, porque un rótulo de tres líneas alineado a la
 * izquierda dentro de una fila centrada deja el bloque visualmente torcido igual.
 */
@media (max-width: 767px) {
  [style*="min-height: 250px"] > [style*="align-items: baseline"] {
    justify-content: center;
    text-align: center;
  }
}