/* ============================================================ C19-D — Cabecera MÓVIL global: [☰] [CINEDAR + subtítulo] [🛒] Acompaña a _CineDarMobileHeader.cshtml. Se carga en _HomeLayout y _AccountLayout, así que convive con home.css y con account-dashboard.css: por eso todo lleva el prefijo propio .cd-mh- y no reutiliza ni pisa ninguna clase de esas dos hojas. SOLO MÓVIL: fuera del @media no hay nada más que el display:none de abajo, de modo que este archivo no puede alterar el escritorio de ninguna página. ============================================================ */ /* En escritorio el componente 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 la cabecera siga oculta, nunca que se cuele en el escritorio. */ .cd-mh, .cd-mh-spacer, .cd-mh-menu { display: none; } @media (max-width: 767.98px) { /* Altura de la cabecera. Una sola fuente: la usan la cabecera, su hueco y la posición del menú, así que no se pueden desincronizar. */ :root { --cd-hdr-h: 56px; } /* ---------- Cabecera fija ---------- FIXED, no sticky: sticky se pega solo dentro de su contenedor, y aquí el componente cuelga del para quedar anclado al viewport pase lo que pase debajo. z-index 50 = por encima del contenido (que no pasa de 3) y por DEBAJO de todo lo que cubre la pantalla entera: .ko-modal y .sup-modal (100), .dn-modal (120), los modales de Bootstrap (1050), .pd-terms-ov (1200) y Culqi (~2147483000). En C19-C valía 1090 y se comió a todos: al abrir el modal de donación la cabecera seguía encendida sobre el fondo atenuado. Las barras fijas de abajo (#pd-minicart 40, .cd-bnav 50, flotantes 90/92) no compiten: están en el borde opuesto y no se solapan con la cabecera. */ .cd-mh { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: .5rem; height: var(--cd-hdr-h); padding: 0 .7rem; background: rgba(9, 6, 20, .97); border-bottom: 1px solid rgba(139, 92, 246, .28); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); } /* Hueco: la cabecera 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-mh-spacer { display: block; height: var(--cd-hdr-h); } /* ---------- Marca centrada, subtítulo debajo ---------- */ .cd-mh-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex: 1 1 auto; min-width: 0; } .cd-mh-brand { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; } .cd-mh-play { width: 24px; height: 24px; color: #8b5cf6; filter: drop-shadow(0 0 8px rgba(139, 92, 246, .8)); } .cd-mh-logo { height: 26px; width: auto; } .cd-mh-sub { font-size: .5rem; letter-spacing: .2em; font-weight: 700; color: #a78bfa; white-space: nowrap; } /* ---------- Carrito ---------- Ancho fijo igual al de la hamburguesa: es lo que mantiene la marca centrada de verdad. */ .cd-mh-cart { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 40px; } .cd-mh-cart .cd-cartlink { display: inline-flex; align-items: center; justify-content: center; position: relative; color: #cbd5e1; } .cd-mh-cart .cd-cartlink svg { width: 22px; height: 22px; } .cd-mh-cart .cd-cartcount { position: absolute; top: -7px; right: -9px; background: linear-gradient(95deg, #7c3aed, #22d3ee); color: #04121a; font-size: .62rem; font-weight: 800; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; line-height: 1; } /* ---------- Hamburguesa: 3 barras que se cruzan al abrir ---------- */ .cd-mh-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; flex: 0 0 40px; width: 40px; height: 40px; padding: 0 9px; border-radius: 11px; border: 1px solid rgba(139, 92, 246, .45); background: rgba(139, 92, 246, .10); cursor: pointer; } .cd-mh-burger span { display: block; height: 2px; border-radius: 2px; background: #c4b5fd; transition: transform .22s ease, opacity .18s ease; } .cd-mh-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .cd-mh-burger.is-open span:nth-child(2) { opacity: 0; } .cd-mh-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Panel del menú ---------- Cuelga de la cabecera fija, así que también va fixed y alineado con la hamburguesa. z-index 51: justo encima de la cabecera y, como ella, por debajo de todos los modales. */ .cd-mh-menu { position: fixed; top: calc(var(--cd-hdr-h) + 6px); left: 10px; z-index: 51; display: grid; width: min(230px, calc(100vw - 20px)); gap: .15rem; padding: .35rem; border-radius: 12px; border: 1px solid rgba(139, 92, 246, .3); background: rgba(10, 6, 26, .98); box-shadow: 0 14px 34px rgba(0, 0, 0, .6); animation: cd-mh-in .18s ease; } .cd-mh-menu[hidden] { display: none; } /* Los enlaces y el botón de Salir comparten estilo: en el menú son la misma cosa, aunque Salir tenga que ser un