/* PWA móvil aditivo: no cambia colores ni componentes, solo apilado y toque en pantallas pequeñas. */
* { -webkit-tap-highlight-color: transparent; }
/* App-like: en móvil el contenido va primero y el bloque de acciones después. En escritorio no cambia nada. */
@media (max-width: 1023px) {
  #panelContenidoPrincipal { order: 1; }
  #panelLateralAcciones { order: 2; }
}
@media (max-width: 768px) {
  .pwa-hide-mobile { display: none !important; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  button, .menu-item, a { min-height: 40px; }
  /* 16px en campos evita el zoom automático de iPhone al enfocar. */
  input, select, textarea { font-size: 16px !important; }
  #tablaCuentas tr, #tablaDemos tr { vertical-align: top; }
  .glass-panel-hariri { border-radius: 14px !important; }
  /* Avisos: arriba para no tapar la barra inferior, máximo 2 visibles y compactos. */
  #toastContainer { top: 12px !important; bottom: auto !important; left: 12px !important; right: 12px !important; align-items: center; }
  #toastContainer > div { width: 100% !important; max-width: 100% !important; padding: 10px 12px !important; }
  #toastContainer > div:nth-child(n+3) { display: none !important; }
  /* Barra inferior con área segura de iPhone y por encima de los flotantes en móvil. */
  #bottomNavMovil { padding-bottom: env(safe-area-inset-bottom); z-index: 92 !important; }
  /* Menú Más: botones grandes de 48px mínimo. */
  #masMovil button { min-height: 48px; }
  /* Flotantes fuera de la barra inferior: apilados a la derecha y comunidad a la izquierda. */
  #widgetChatFlotante { bottom: 5.5rem !important; right: 0.75rem !important; }
  #btnInstalacionWrap { bottom: 9.75rem !important; right: 0.75rem !important; }
  #chatComunidadWrap { bottom: 5.5rem !important; left: 0.75rem !important; }
  #widgetChatFlotante > div > button:first-child,
  #btnInstalacionFlotante { width: 3rem !important; height: 3rem !important; }
}