/* ========================================================================== PWA Tab Bar — barra inferior estilo app nativa (5 accesos rapidos). Clase propia (pwa-tabbar*) para NO chocar con la barra .pwa-bottom-nav autogenerada de nav.php. Solo visible en movil (<=768px). La activa pwa-tabbar.js agregando .pwa-tabbar-on al . Diseno: la barra va llena del color corporativo, como las apps de banco, y no blanca con el color solo en el item activo. Sobre fondo de color los iconos van en blanco, y el activo se marca con una pastilla translucida ademas del blanco pleno: la diferencia de opacidad sola no alcanza para distinguirlo. ========================================================================== */ :root { --pwa-tb-h: 62px; --pwa-tb-bg: var(--empresa-color, var(--pwa-theme-color, #65b1b9)); --pwa-tb-ink: #ffffff; --pwa-tb-ink-dim: rgba(255, 255, 255, 0.68); --pwa-tb-pill: rgba(255, 255, 255, 0.18); } /* Empuja el contenido para que la barra no tape el footer */ body.pwa-tabbar-on { padding-bottom: calc(var(--pwa-tb-h) + env(safe-area-inset-bottom, 0px)) !important; } .pwa-tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--pwa-tb-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; align-items: stretch; justify-content: space-around; /* Velo oscuro sobre el color de marca: da relieve y sube el contraste. El velo de securapp-prlcol (12% a 22%) NO sirve aqui y por eso se cambio. Su color es un magenta oscuro (#ce32ff) y con ese velo el blanco le llega a 4.8:1; el de working es un turquesa CLARO (#65b1b9), donde el blanco puro se queda en 2.46:1 y con el velo del 22% solo sube a 3.91:1, por debajo del 4.5:1 que exige el estandar para las etiquetas de 10px. Medido: hace falta un 30% para cruzar el umbral (4.69:1). Se usa 30% a 40% para conservar el degradado, asi que el punto mas claro de la barra ya cumple. Se hace con una capa rgba y no con color-mix para que funcione tambien en los WebKit viejos de iOS, donde color-mix no existe. */ background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.40) 100%), var(--pwa-tb-bg); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18); z-index: 1035; /* sobre contenido, bajo backdrop del sidenav y modales */ -webkit-tap-highlight-color: transparent; } /* Solo movil: en escritorio manda el sidebar */ @media (min-width: 769px) { .pwa-tabbar { display: none !important; } body.pwa-tabbar-on { padding-bottom: 0 !important; } } /* Con la tab bar activa, ocultar la barra inferior autogenerada (.pwa-bottom-nav) para que nunca se superpongan (visto en iOS). */ body.pwa-tabbar-on .pwa-bottom-nav { display: none !important; } .pwa-tb-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--pwa-tb-ink-dim); font-size: 10px; font-weight: 600; line-height: 1; padding: 8px 2px 6px; transition: color 150ms ease; position: relative; background: none; border: 0; cursor: pointer; } .pwa-tb-item:hover, .pwa-tb-item:focus { color: var(--pwa-tb-ink); text-decoration: none; } .pwa-tb-item:active { transform: scale(0.94); } .pwa-tb-item.is-active { color: var(--pwa-tb-ink); font-weight: 700; } /* Pastilla del activo: identidad que no depende solo del tono del blanco */ .pwa-tb-item .pwa-tb-ico { display: flex; align-items: center; justify-content: center; width: 46px; height: 28px; border-radius: 14px; transition: background 180ms ease; } .pwa-tb-item.is-active .pwa-tb-ico { background: var(--pwa-tb-pill); } .pwa-tb-item svg { width: 22px; height: 22px; display: block; } /* Foto del usuario en el acceso "Perfil". Va con aro para que se lea como avatar y no como una mancha, y se ilumina cuando el item esta activo. */ .pwa-tb-foto { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; background: #fff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55); } .pwa-tb-item.is-active .pwa-tb-foto { box-shadow: 0 0 0 1.5px #fff; } /* Globo de pendientes. Rojo y no blanco: sobre la barra de color el blanco se confundiria con el icono, y este numero tiene que saltar. */ .pwa-tb-badge { position: absolute; top: -3px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ff4757; color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.10); } .pwa-tb-badge[hidden] { display: none; } .pwa-tb-item .pwa-tb-ico { position: relative; } .pwa-tb-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Boton central destacado: circulo del color corporativo con el icono blanco. Va en el color de marca puro, sin el velo oscuro que lleva la barra, asi que queda un punto mas claro que el fondo sobre el que se apoya; eso y el arco blanco de abajo son los que lo despegan de la barra. */ .pwa-tb-item--fab { justify-content: flex-end; } .pwa-tb-item--fab .pwa-tb-fab { position: absolute; top: -28px; /* mas arriba: deja mas circulo fuera de la barra */ width: 54px; height: 54px; border-radius: 50%; /* Lleva un velo del 12%, mucho mas suave que el 30-40% de la barra: sigue siendo el punto mas claro y por eso se despega, pero el icono blanco pasa de 2.46:1 a 3.02:1 y cumple el 3:1 que rige para elementos graficos (el 4.5:1 del estandar aplica al texto; aqui el icono mide 26px y el circulo 54px). Sin el velo el icono se perdia contra el propio circulo. */ background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), var(--pwa-tb-bg); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.30); transition: transform 180ms ease; } /* Borde blanco marcado, solo en la mitad inferior: es la mitad que entra en la barra, y con el circulo tambien morado es lo unico que lo separa de ella. En la mitad de arriba no va porque queda contra el contenido de la pagina, casi siempre claro, y ahi el borde del propio circulo morado ya se ve solo; de esa mitad se encarga la sombra. Se dibuja como un aro completo por fuera del circulo y se recorta a la mitad con clip-path, en vez de usar border-bottom: un border-bottom sobre un circulo se adelgaza hacia los lados y no da un arco parejo. */ .pwa-tb-item--fab .pwa-tb-fab::after { content: ''; position: absolute; top: -5px; right: -5px; bottom: -5px; left: -5px; border-radius: 50%; border: 4px solid #fff; -webkit-clip-path: inset(50% 0 0 0); clip-path: inset(50% 0 0 0); pointer-events: none; } .pwa-tb-item--fab:active .pwa-tb-fab { transform: scale(0.92); } .pwa-tb-item--fab .pwa-tb-fab svg { width: 26px; height: 26px; } .pwa-tb-item--fab .pwa-tb-label { margin-top: 26px; } .pwa-tb-item--fab .pwa-tb-ico { display: none; } /* Con el sidebar abierto, el boton de menu gira: la X no hace falta porque el mismo toque lo cierra. Gira el icono y no el circulo, para que el arco blanco de abajo se quede donde debe. */ body.g-sidenav-pinned .pwa-tb-item--menu .pwa-tb-fab svg { transform: rotate(90deg); transition: transform 180ms ease; }