/* ========================================================================== De Salas CRM · capa PWA -------------------------------------------------------------------------- Solo lo que aporta el "modo aplicación": zonas seguras del notch, avisos de la PWA, ergonomía táctil y ajustes de la app instalada. El diseño del CRM sigue viniendo de tailwind.css + main.css; aquí no se cambia la marca. Se carga desde includes/pwa_head.php, es decir, la última hoja del . ========================================================================== */ /* -------------------------------------------------------------------------- 1. Zonas seguras (notch, isla dinámica, barra de gestos) Con apple-mobile-web-app-status-bar-style=black-translucent el contenido se pinta bajo la barra de estado: hay que reservarla en la cabecera móvil. -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .mobile-topbar { padding-top: calc(0.5rem + env(safe-area-inset-top)) !important; height: calc(56px + env(safe-area-inset-top)) !important; padding-left: calc(1rem + env(safe-area-inset-left)) !important; padding-right: calc(1rem + env(safe-area-inset-right)) !important; } /* La cabecera pegajosa de los formularios se apoya bajo la topbar. */ .sticky-header { top: calc(56px + env(safe-area-inset-top)) !important; } /* El cajón lateral ocupa toda la altura: también se le reservan las zonas. */ #sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* Último bloque de la página: que no quede bajo la barra de gestos. */ main { padding-bottom: env(safe-area-inset-bottom); } /* Barras flotantes ancladas abajo. */ .barra-flotante-masiva { bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important; } } /* -------------------------------------------------------------------------- 2. Ergonomía táctil -------------------------------------------------------------------------- */ @media (hover: none) and (pointer: coarse) { /* iOS hace zoom automático al enfocar un campo con menos de 16px. Se sube el tamaño solo en táctil: en escritorio se mantiene la escala del CRM. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; } /* Altura mínima cómoda para el dedo (recomendación de Apple: 44px). */ input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, button, .btn, a.btn { min-height: 44px; } /* Los iconos de acción de las tablas y tarjetas suelen ir en 28-32px. */ .actions-hover a, .actions-hover button, td a.icon-btn, td button.icon-btn { min-width: 40px; min-height: 40px; } /* El resaltado azul de iOS ensucia botones y filas enteras. */ a, button, [role="button"], summary { -webkit-tap-highlight-color: rgba(18, 65, 141, 0.12); } /* Los desplegables y paneles con scroll interno se mueven con inercia. */ .custom-scrollbar, .table-container, .modal, .overflow-x-auto, .overflow-y-auto { -webkit-overflow-scrolling: touch; } } /* -------------------------------------------------------------------------- 3. Aplicación instalada (sin barra de navegador) -------------------------------------------------------------------------- */ html.pwa-standalone { /* Evita el "rebote" de la página entera, que en standalone deja ver el fondo del sistema y parece que la app se despega. Va en y no en a propósito. En impedía además que el navegador cediera hacia arriba un gesto que había recogido sin poder atenderlo, y entre eso y el `overflow-x` de main.css la pantalla se quedaba clavada en Android: el dedo se movía y no bajaba nada. Aquí protege igual del rebote sin bloquear ese traspaso. */ overscroll-behavior-y: none; } /* Botón atrás que inyecta assets/js/pwa.js en la cabecera móvil. */ .pwa-btn-atras { background: transparent; border: 0; color: #ffffff; padding: 0.5rem; margin-right: -0.25rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-width: 40px; min-height: 40px; } .pwa-btn-atras:active { background: rgba(255, 255, 255, 0.12); } /* En modo aplicación no tiene sentido ofrecer "abrir en el navegador". */ .pwa-standalone .solo-navegador { display: none !important; } /* -------------------------------------------------------------------------- 4. Avisos de la PWA (actualización, instalación, conexión) -------------------------------------------------------------------------- */ .pwa-aviso { position: fixed; left: max(0.75rem, env(safe-area-inset-left)); right: max(0.75rem, env(safe-area-inset-right)); bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 2000; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 1rem; border-radius: 0.875rem; background: #1e293b; color: #f8fafc; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35); font-size: 0.875rem; line-height: 1.35; opacity: 0; transform: translateY(0.75rem); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .pwa-aviso.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .pwa-aviso-texto { flex: 1 1 auto; min-width: 0; } .pwa-aviso-acciones { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .pwa-aviso-btn { font: inherit; font-weight: 600; color: #ffffff; background: #12418d; border: 0; border-radius: 0.5rem; padding: 0.5rem 0.9rem; min-height: 40px; cursor: pointer; white-space: nowrap; } .pwa-aviso-btn:active { background: #0e3474; } .pwa-aviso-cerrar { font-size: 1.35rem; line-height: 1; color: #94a3b8; background: transparent; border: 0; border-radius: 0.5rem; width: 40px; height: 40px; cursor: pointer; } .pwa-aviso-cerrar:active { background: rgba(255, 255, 255, 0.08); } .pwa-aviso-aviso { background: #92400e; /* sin conexión */ } .pwa-aviso-info .pwa-aviso-btn { background: #2563eb; /* actualización disponible */ } /* En pantallas grandes el aviso no ocupa todo el ancho. */ @media (min-width: 640px) { .pwa-aviso { left: auto; right: max(1.25rem, env(safe-area-inset-right)); max-width: 26rem; } } @media print { .pwa-aviso { display: none !important; } }