/* VenPo Web Demo — ajustes para celular (≤ 640px): cabecera compacta y más espacio para la demostración */
@media (max-width: 640px) {
  /* Cabecera en una sola fila */
  #root header.flex-wrap {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 4px 8px;
  }
  /* Logo sin texto (el nombre ya aparece en el inicio de la demo) */
  #root header.flex-wrap > button:first-child { min-height: 36px; padding-right: 0; }
  #root header.flex-wrap > button:first-child > span { display: none; }
  /* Selector Tienda / Restaurante ocupa el espacio central */
  #root header.flex-wrap > div.order-last {
    order: 0;
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding: 2px;
  }
  #root header.flex-wrap > div.order-last button {
    min-height: 34px;
    padding: 0 6px;
    gap: 4px;
    font-size: 13px;
  }
  #root header.flex-wrap > div.order-last button { min-width: 0; overflow: hidden; }
  #root header.flex-wrap > div.order-last button svg { width: 16px; height: 16px; flex-shrink: 0; }
  /* Acciones a la mano, sin textos */
  #root header.flex-wrap > div.ml-auto { margin-left: 0; gap: 2px; flex-shrink: 0; }
  #root header.flex-wrap > div.ml-auto button,
  #root header.flex-wrap > div.ml-auto a,
  #root header.flex-wrap > div.ml-auto > div > button { min-height: 38px; }
  #root header.flex-wrap > div.ml-auto > button:first-child { display: none; } /* "Inicio" ya está en el menú ⋮ */
  #root header.flex-wrap > div.ml-auto > button { padding: 0 8px; }
  #root header.flex-wrap > div.ml-auto > a { padding: 0 8px; gap: 0; }
  #root header.flex-wrap > div.ml-auto > a > span:not(:first-child) { display: none; } /* solo ícono de Google Play */
  #root header.flex-wrap > div.ml-auto > div > button { width: 36px; height: 38px; }
  /* Aviso "usa una tableta" no aplica en un celular */
  #root div[role="note"] { display: none; }
}

/* Celulares muy angostos (≤ 360px): selector solo con texto para que todo quepa */
@media (max-width: 360px) {
  #root header.flex-wrap { gap: 4px; padding: 4px 6px; }
  #root header.flex-wrap > div.order-last button { font-size: 11px; padding: 0 3px; }
  #root header.flex-wrap > div.order-last button svg { display: none; }
  #root header.flex-wrap > div.ml-auto > button,
  #root header.flex-wrap > div.ml-auto > a { padding: 0 6px; }
}