/** * Hello Plataforma · Bottom Nav Component * * Sticky bottom navigation con backdrop blur, * safe-area iOS, badges y estados activos. */ /* ============================================================ BOTTOM NAV BASE ============================================================ */ .hp-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 0.5px solid var(--hp-border-purple); /* Safe area para iPhones con barra inferior */ padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -2px 12px -4px rgba(105, 73, 158, 0.08); /* Forzar repintado en Safari */ -webkit-transform: translateZ(0); transform: translateZ(0); } /* Espaciador automático: cuando el bottom nav existe en la página, reservar espacio al final del para que el contenido no quede tapado al hacer scroll hasta el final */ body:has(.hp-bottom-nav) { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0)); } .hp-bottom-nav-inner { display: flex; justify-content: space-around; align-items: stretch; gap: 4px; padding: 10px 8px 12px; max-width: 100%; } /* ============================================================ ITEM ============================================================ */ .hp-bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; text-decoration: none !important; color: var(--hp-text-tertiary); background: transparent; border: none; cursor: pointer; font-family: var(--hp-font-base); border-radius: 10px; transition: background-color var(--hp-duration-fast) var(--hp-ease), color var(--hp-duration-normal) var(--hp-ease), transform var(--hp-duration-fast) var(--hp-ease); min-height: 48px; position: relative; isolation: isolate; } /* Defensa: ningún hijo del nav debe tener decoración */ .hp-bottom-nav-item, .hp-bottom-nav-item *, .hp-bottom-nav-item:hover, .hp-bottom-nav-item:hover *, .hp-bottom-nav-item:focus, .hp-bottom-nav-item:focus *, .hp-bottom-nav-item:active, .hp-bottom-nav-item:active *, .hp-bottom-nav-item.is-active, .hp-bottom-nav-item.is-active * { text-decoration: none !important; border-bottom: 0 !important; } .hp-bottom-nav-item:hover { background-color: rgba(149, 117, 205, 0.06); color: var(--hp-purple-deep); text-decoration: none !important; } .hp-bottom-nav-item:active { transform: scale(0.94); } .hp-bottom-nav-item:focus-visible { outline: 2px solid var(--hp-purple-deep); outline-offset: 2px; } /* Override agresivo de underline que algunos temas padre inyectan */ .hp-bottom-nav a, .hp-bottom-nav a:hover, .hp-bottom-nav a:focus, .hp-bottom-nav a:visited, .hp-bottom-nav a:active, .hp-bottom-nav span, .hp-bottom-nav .hp-bottom-nav-label { text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important; } /* ============================================================ ICON ============================================================ */ .hp-bottom-nav-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .hp-bottom-nav-item i { font-size: 24px; line-height: 1; color: inherit; transition: color var(--hp-duration-normal) var(--hp-ease), transform var(--hp-duration-normal) var(--hp-ease); } .hp-bottom-nav-item.is-active i { transform: scale(1.05); } /* ============================================================ LABEL · MODO ICON-ONLY Labels ocultos visualmente pero accesibles para screen readers ============================================================ */ .hp-bottom-nav-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ WALLET ITEM (especial · ya no muestra texto debajo) El saldo va en un badge lateral al lado del icono (ver más abajo) ============================================================ */ .hp-bottom-nav-item--wallet .hp-bottom-nav-label { /* Wallet ya no muestra el saldo como label inferior · solo accesible para SR */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ BADGE LATERAL DEL WALLET (monto al lado del icono) ============================================================ */ .hp-bottom-nav-balance-badge { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); margin-left: 4px; background: linear-gradient(135deg, #69499E 0%, #5E3F8C 100%); color: #FFFFFF; font-family: var(--hp-font-base); font-size: 9px; font-weight: 800; letter-spacing: -0.2px; padding: 3px 6px; border-radius: 99px; line-height: 1; white-space: nowrap; font-feature-settings: 'tnum' 1, 'lnum' 1; border: 1.5px solid var(--hp-bg-primary); box-shadow: 0 1px 3px rgba(105, 73, 158, 0.30); pointer-events: none; /* Para que no compita con label del item */ z-index: 2; } /* ============================================================ ITEM +18 (custom, no es icono Tabler) ============================================================ */ .hp-bottom-nav-age { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hp-gradient-purple-button); color: #FFFFFF; font-family: var(--hp-font-base); font-size: 11px; font-weight: 800; letter-spacing: -0.3px; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px -1px rgba(105, 73, 158, 0.30); /* Mantener visualmente al mismo tamaño que los Tabler de 24px */ } /* Hover state */ .hp-bottom-nav-item--age:hover .hp-bottom-nav-age { transform: scale(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 4px 8px -1px rgba(105, 73, 158, 0.40); transition: transform var(--hp-duration-normal) var(--hp-ease), box-shadow var(--hp-duration-normal) var(--hp-ease); } /* Estado activo · halo morado adicional */ .hp-bottom-nav-item--age.is-active .hp-bottom-nav-age { transform: scale(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 3px rgba(149, 117, 205, 0.20), 0 4px 10px -1px rgba(105, 73, 158, 0.45); } /* En estado activo · oculta la píldora general (porque el círculo ya destaca) */ .hp-bottom-nav-item--age.is-active::before { display: none; } /* ============================================================ ESTADO ACTIVO ============================================================ */ .hp-bottom-nav-item.is-active { color: var(--hp-purple-deep); position: relative; } .hp-bottom-nav-item.is-active .hp-bottom-nav-label { font-weight: 600; } .hp-bottom-nav-item.is-active i { color: var(--hp-purple-deep); filter: drop-shadow(0 1px 2px rgba(105, 73, 158, 0.20)); /* Hacer el icono un poco más bold visualmente */ font-weight: 700; -webkit-text-stroke: 0.5px currentColor; } /* Pequeña píldora de fondo para el activo · ajustada para modo icon-only */ .hp-bottom-nav-item.is-active::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 32px; border-radius: 16px; background: linear-gradient(135deg, rgba(212, 191, 232, 0.40) 0%, rgba(168, 135, 208, 0.20) 100%); border: 0.5px solid rgba(149, 117, 205, 0.25); z-index: -1; } /* Cuando el item activo es Wallet con saldo visible, mover la píldora */ .hp-bottom-nav-item--wallet.is-active::before { top: 26%; height: 28px; } /* ============================================================ BADGE DE NOTIFICACIONES ============================================================ */ .hp-bottom-nav-badge { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--hp-gradient-purple-button); color: #FFFFFF; font-family: var(--hp-font-base); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: 0; border: 1.5px solid var(--hp-bg-primary); font-feature-settings: 'tnum' 1, 'lnum' 1; box-shadow: 0 1px 3px rgba(105, 73, 158, 0.30); pointer-events: none; } /* Puntito de notificación · mensajes sin leer (sin contador) */ .hp-bottom-nav-dot { position: absolute; top: -2px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--hp-purple); border: 2px solid var(--hp-bg-primary); pointer-events: none; animation: hp-nav-dot-pulse 1.8s ease-in-out infinite; } @keyframes hp-nav-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(149, 117, 205, 0.55); } 50% { box-shadow: 0 0 0 5px rgba(149, 117, 205, 0); } } /* ============================================================ VARIANTES ============================================================ */ /* Fan: ahora 5 items (incluye Mensajes) · compactos como creator */ .hp-bottom-nav--fan .hp-bottom-nav-inner { /* Default flex es suficiente */ } .hp-bottom-nav--fan .hp-bottom-nav-item { padding: 6px 2px; } .hp-bottom-nav--fan .hp-bottom-nav-label { font-size: 9.5px; } /* Creator: 5 items, ítems un poco más compactos */ .hp-bottom-nav--creator .hp-bottom-nav-item { padding: 6px 2px; } .hp-bottom-nav--creator .hp-bottom-nav-label { font-size: 9.5px; } /* ============================================================ COMPENSAR ALTURA EN BODY Para que el contenido no quede tapado por el nav fijo ============================================================ */ body.hp-has-bottom-nav { /* No padding necesario porque el nav es sticky desde la parte inferior del flujo, no fixed. El contenido se acomoda naturalmente arriba. */ } /* ============================================================ RESPONSIVE ============================================================ */ /* Tablet y mayor: max-width centrado para no estirarse en pantallas anchas */ @media (min-width: 768px) { .hp-bottom-nav-inner { max-width: 720px; margin: 0 auto; padding: 12px 16px 14px; } .hp-bottom-nav-item i { font-size: 24px; } .hp-bottom-nav-label { font-size: 11px; } } /* Desktop: el bottom nav es menos común pero mantenemos consistencia */ @media (min-width: 1024px) { .hp-bottom-nav-inner { max-width: 960px; } } /* ============================================================ ITEM DESHABILITADO (próximamente) ============================================================ */ .hp-bottom-nav-item.is-disabled { cursor: not-allowed; opacity: 0.55; } .hp-bottom-nav-item.is-disabled .hp-bottom-nav-label { font-weight: 500; } .hp-bottom-nav-item.is-disabled:hover, .hp-bottom-nav-item.is-disabled:active { opacity: 0.55; } /* ============================================================ BADGE LABEL (texto chico tipo "Pronto" en vez de número) ============================================================ */ .hp-bottom-nav-badge-label { position: absolute; top: -6px; right: -14px; background: linear-gradient(135deg, rgba(212, 191, 232, 0.95) 0%, rgba(168, 135, 208, 0.85) 100%); color: #FFFFFF; font-family: var(--hp-font-base); font-size: 8px; font-weight: 700; letter-spacing: 0.3px; padding: 2px 5px; border-radius: 99px; text-transform: uppercase; line-height: 1; white-space: nowrap; border: 1.5px solid var(--hp-bg-primary); box-shadow: 0 1px 3px rgba(105, 73, 158, 0.30); pointer-events: none; } /* ============================================================ DARK MODE FRIENDLY (futuro) Reservado para cuando agreguemos modo oscuro ============================================================ */ @media (prefers-color-scheme: dark) { /* Reservado para v2 con modo oscuro */ } /* ============================================================ IMPRESIÓN El bottom nav no se imprime ============================================================ */ @media print { .hp-bottom-nav { display: none; } }