/* ============================================================ C22 — Barra inferior MÓVIL global: [Inicio] [Pedidos] (Recarga) [Contacto] [Cuenta] Acompaña a _CineDarMobileBottomNav.cshtml. Se carga en _HomeLayout y en _AccountLayout, así que convive con home.css y con account-dashboard.css: por eso todo lleva su propio prefijo .cd-bnav- y no reutiliza ni pisa nada de esas dos hojas. SOLO MÓVIL: fuera del @media no hay más que el display:none de abajo, de modo que este archivo no puede alterar el escritorio de ninguna página. ============================================================ */ /* En escritorio la barra NO EXISTE. Va fuera del media (y no dentro de uno de min-width) para que sea el estado por defecto: si una plantilla cargara esta hoja en otro orden, lo peor que pasa es que siga oculta, nunca que se cuele en el escritorio. */ .cd-bnav, .cd-bnav-spacer { display: none; } @media (max-width: 767.98px) { :root { --cd-bnav-h: 66px; /* Sitio que la barra OCUPA abajo, zona segura del móvil incluida. Es el contrato con las demás hojas: cualquier cosa fija al fondo se aparta con `bottom: var(--cd-bnav-oc, 0px)` y se coloca sola, porque fuera de este @media la variable no existe y el respaldo 0px deja las cosas justo como estaban. Lo usa #pd-minicart en product-detail.css. */ --cd-bnav-oc: calc(var(--cd-bnav-h) + env(safe-area-inset-bottom, 0px)); /* El fondo de la barra es también el del anillo que separa el botón central del contorno: una sola fuente para que no se vea un halo de otro color alrededor del botón. */ --cd-bnav-bg: #0b0818; --cd-bnav-line: rgba(139, 92, 246, .38); } /* ---------- La barra ---------- z-index 50 = el mismo de la cabecera: por encima del contenido y por DEBAJO de todo lo que cubre la pantalla entera (ko-modal/sup-modal 100, dn-modal 120, Bootstrap 1050, pd-terms-ov 1200, Culqi ~2147483000). Un modal tiene que poder taparla. */ .cd-bnav { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--cd-bnav-oc); padding: 0 .2rem env(safe-area-inset-bottom, 0px); background: linear-gradient(180deg, #171030, var(--cd-bnav-bg)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* El CONTORNO de la referencia: línea a los lados y arriba, con las esquinas superiores redondeadas, para que la barra se lea como una pieza y no como un corte de la página. */ border: 1px solid var(--cd-bnav-line); border-bottom: none; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .55), 0 -1px 0 rgba(255, 255, 255, .04) inset; } /* Hueco: la barra es fixed y no ocupa sitio, así que el componente devuelve su altura por su cuenta. Sin clases en el = sin acoplamiento con la plantilla. */ .cd-bnav-spacer { display: block; height: var(--cd-bnav-oc); } /* ---------- Cada acceso ---------- */ .cd-bnav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; height: var(--cd-bnav-h); padding: 0 .1rem; text-decoration: none; color: #8b90ad; font-size: .6rem; font-weight: 700; letter-spacing: .01em; line-height: 1; text-align: center; } /* El icono va en su propia cápsula: es lo que deja marcar el activo sin que el texto baile. */ .cd-bnav-ic { display: grid; place-items: center; width: 38px; height: 28px; border-radius: 10px; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; } .cd-bnav-ic svg { width: 20px; height: 20px; } .cd-bnav-tx { display: block; } .cd-bnav-item.is-active { color: #c4b5fd; } .cd-bnav-item.is-active .cd-bnav-ic { background: rgba(139, 92, 246, .2); border-color: rgba(139, 92, 246, .5); color: #c4b5fd; box-shadow: 0 0 14px rgba(139, 92, 246, .28); } .cd-bnav-item:hover { color: #c4b5fd; } /* WhatsApp con su color: es un salto FUERA del sitio y conviene que se note. */ .cd-bnav-wa .cd-bnav-ic { color: #25d366; } .cd-bnav-wa:hover { color: #25d366; } /* ---------- Recarga: botón central elevado ---------- Los dos primeros box-shadow son el efecto de la referencia: un anillo del color del fondo que abre hueco en la barra, y justo fuera la MISMA línea del contorno, que así parece rodear el botón en vez de pasar por detrás. */ .cd-bnav-mid { color: #cfc9ea; } .cd-bnav-fab { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-top: -26px; background: linear-gradient(135deg, #7c3aed, #4f46e5); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 0 0 5px var(--cd-bnav-bg), 0 0 0 6px var(--cd-bnav-line), 0 10px 24px rgba(124, 58, 237, .55); transition: filter .15s; } .cd-bnav-fab svg { width: 24px; height: 24px; color: #fff; } .cd-bnav-mid:hover .cd-bnav-fab { filter: brightness(1.12); } .cd-bnav-mid.is-active { color: #c4b5fd; } .cd-bnav-mid.is-active .cd-bnav-fab { box-shadow: 0 0 0 5px var(--cd-bnav-bg), 0 0 0 6px rgba(167, 139, 250, .85), 0 10px 26px rgba(124, 58, 237, .7); } /* Móvil estrecho: solo se aprieta el texto; los toques siguen midiendo lo mismo. */ @media (max-width: 340px) { .cd-bnav-item { font-size: .54rem; } .cd-bnav-ic { width: 32px; } } } @media (prefers-reduced-motion: reduce) { .cd-bnav-ic, .cd-bnav-fab { transition: none; } }