/**
 * Drawer del menú móvil (doc 08, mockup 07 "menu-movil.png").
 *
 * Se apoya en <details>, así que abre, cierra y despliega sin JavaScript.
 * Colores tomados del mockup: rótulos y iconos de acceso en oro, filas de
 * navegación en blanco, entrada actual con marco cian, CTA de cristal cian.
 */

/* ------------------------------------------------------- 1. El disparador */

/* Márgenes del panel dentro de la pantalla, medidos en el mockup, y la receta
   de cristal que comparten el panel y todas las piezas de dentro: un velo
   claro que se ilumina arriba, un filo tenue y un reflejo interior.

   Van en la raíz y no en el menú porque ya no son suyas: el drawer del
   carrito usa el mismo cristal y las mismas medidas, y colgadas del menú no
   le llegaban —su panel se quedaba sin fondo y sin márgenes, pegado a la
   esquina de la pantalla. */
:root {
	--bx-drawer-arriba: calc(env(safe-area-inset-top, 0px) + 8px);
	--bx-drawer-abajo: calc(env(safe-area-inset-bottom, 0px) + 16px);
	--bx-drawer-lado: 12px;

	--bx-cristal: linear-gradient(
		180deg,
		rgba(255, 255, 255, .10) 0%,
		rgba(255, 255, 255, .035) 42%,
		rgba(255, 255, 255, .015) 72%,
		rgba(255, 255, 255, .055) 100%
	);
	--bx-cristal-filo: rgba(196, 238, 250, .3);
	--bx-cristal-reflejo: inset 0 1px 0 rgba(255, 255, 255, .2);
	--bx-cristal-activo: linear-gradient(
		180deg,
		rgba(56, 214, 245, .2) 0%,
		rgba(56, 214, 245, .07) 55%,
		rgba(56, 214, 245, .13) 100%
	);
}

.bx-menu-movil {
	position: relative;
}

.bx-menu-movil__disparador {
	list-style: none;
	cursor: pointer;
}

.bx-menu-movil__disparador::-webkit-details-marker {
	display: none;
}

/* El aspa vive dentro del propio summary: al abrirse, el control se coloca
   sobre el drawer y hace de botón de cierre. Así se puede cerrar el menú
   aunque no haya JavaScript. */
.bx-menu-movil__aspa {
	display: none;
}

.bx-menu-movil[open] .bx-menu-movil__hamburguesa {
	display: none;
}

.bx-menu-movil[open] .bx-menu-movil__aspa {
	display: inline-flex;
}

.bx-menu-movil[open] > .bx-menu-movil__disparador {
	position: fixed;
	top: calc(var(--bx-drawer-arriba) + 12px);
	right: calc(var(--bx-drawer-lado) + 10px);
	z-index: 92;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(210, 236, 248, .42);
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)), rgba(9, 26, 38, .3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
	color: #ffffff;
}

/* --------------------------------------------------- 2. Velo y contenedor */

.bx-menu-movil__velo {
	position: fixed;
	inset: 0;
	z-index: 88;
	background: rgba(0, 4, 9, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: bx-velo-entra .28s ease both;
}

@keyframes bx-velo-entra {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.bx-drawer {
	position: fixed;
	top: var(--bx-drawer-arriba);
	right: var(--bx-drawer-lado);
	bottom: var(--bx-drawer-abajo);
	z-index: 90;
	/* El panel deja ver la página por la izquierda, con margen por los cuatro
	   lados. Ancho pedido por David: 80 %. */
	width: min(80%, 380px);
	display: flex;
	overflow: hidden;
	border-radius: 20px;
	/* El cristal —cuerpo, canto y filo especular— lo pone el sistema de
	   base.css, común a todos los paneles y modales. */
	animation: bx-drawer-entra .28s cubic-bezier(.22, .9, .3, 1) both;
}

/* El panel recibe el foco al abrirse solo para que el lector de pantalla entre
   en él; no es un control, así que no lleva anillo de foco: taparía el filo de
   cristal con un marco cian por los cuatro lados. */
.bx-drawer:focus {
	outline: none;
}

@keyframes bx-drawer-entra {
	from { transform: translateX(100%); opacity: .4; }
	to   { transform: none; opacity: 1; }
}

.bx-drawer__interior {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	/* 46 px arriba: el contenido arranca por debajo del aspa, como el mockup. */
	padding: 46px 16px 20px;
}

/* La barra de scroll del panel, fuera de la vista (petición de David, 25 de
   agosto de 2026): en el escritorio, con barras clásicas, el menú abría con
   una barra gris pegada al filo de cristal del panel. Se sigue pudiendo
   arrastrar, rodar la rueda y usar las flechas; lo único que se va es el
   dibujo de la barra. Es el mismo recurso que ya usan el carril de chips y el
   de colecciones más abajo, y va acotado al menú: el drawer del buscador
   comparte la clase y no entraba en el encargo. */
.bx-menu-movil .bx-drawer__interior {
	scrollbar-width: none;
}

.bx-menu-movil .bx-drawer__interior::-webkit-scrollbar {
	display: none;
}

/* ------------------------------------------------------------ 3. Saludo */

.bx-drawer__saludo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.bx-drawer__avatar {
	flex: 0 0 auto;
	display: block;
	width: 58px;
	height: 58px;
	overflow: hidden;
	border: 1px solid rgba(210, 236, 248, .34);
	border-radius: 15px;
	box-shadow: var(--bx-cristal-reflejo);
}

.bx-drawer__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bx-drawer__saludo-texto {
	display: block;
	min-width: 0;
}

.bx-drawer__hola {
	display: block;
	color: var(--bx-gold-claro);
	font-family: var(--bx-ui);
	font-size: .94rem;
	font-weight: 600;
	line-height: 1.25;
}

.bx-drawer__bienvenida {
	/* El nombre real de la tienda es más largo que el del mockup: se le
	   permiten dos líneas como mucho, nunca tres. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: rgba(255, 255, 255, .78);
	font-size: .72rem;
	line-height: 1.3;
}

/* --------------------------------------------------- 4. Accesos rápidos */

.bx-drawer__accesos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.bx .bx-drawer__acceso {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 43px;
	padding: 8px 10px;
	border: 1px solid var(--bx-cristal-filo);
	border-radius: 12px;
	background: var(--bx-cristal);
	box-shadow: var(--bx-cristal-reflejo);
	color: var(--bx-texto);
	font-size: .8rem;
	font-weight: 500;
	line-height: 1.2;
}

/* El icono va en oro y el texto en blanco, como en el mockup. */
.bx-drawer__acceso .bx-icono {
	flex: 0 0 auto;
	color: var(--bx-gold-claro);
}

.bx .bx-drawer__acceso:hover,
.bx .bx-drawer__acceso:focus-visible {
	border-color: rgba(56, 214, 245, .5);
	background: var(--bx-cristal-activo);
	box-shadow: var(--bx-cristal-reflejo), 0 0 16px rgba(56, 214, 245, .18);
	color: var(--bx-texto);
}

.bx-drawer__acceso-icono {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
}

/* El contador se apoya en la esquina del icono sin comerse el texto. */
.bx-drawer__acceso-icono .bx-contador {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 17px;
	height: 17px;
	font-size: .58rem;
}

/* ------------------------------------------------------- 5. Bloques y rótulos */

.bx-drawer__bloque {
	margin-bottom: 14px;
}

/* Cada bloque va separado por una línea tenue, como en el mockup. */
.bx-drawer__bloque + .bx-drawer__bloque {
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Prefijo .bx para ganar a la regla de títulos, que los pone en serif: en el
   mockup los rótulos de sección son de palo seco. */
.bx .bx-drawer__rotulo {
	margin: 0 0 8px;
	color: rgba(201, 176, 132, .95);
	font-family: var(--bx-ui);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* --------------------------------------------- 6. Navegación principal */

.bx-drawer__lista,
.bx-drawer__sublista {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Cada entrada es una lámina de cristal, no una fila plana: velo claro que se
   apaga hacia el medio, filo tenue y reflejo en el canto superior. */
.bx-drawer__item + .bx-drawer__item {
	margin-top: 4px;
}

.bx .bx-drawer__enlace {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	padding: 5px 8px;
	border: 1px solid var(--bx-cristal-filo);
	border-radius: 9px;
	background: var(--bx-cristal);
	box-shadow: var(--bx-cristal-reflejo);
	color: var(--bx-texto);
	font-size: .82rem;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.bx-drawer__enlace::-webkit-details-marker {
	display: none;
}

.bx-drawer__texto {
	flex: 1 1 auto;
	min-width: 0;
}

.bx-drawer__item-icono {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: rgba(255, 255, 255, .82);
}

.bx-drawer__flecha {
	flex: 0 0 auto;
	display: inline-flex;
	color: rgba(255, 255, 255, .5);
}

.bx .bx-drawer__enlace:hover,
.bx .bx-drawer__enlace:focus-visible {
	border-color: rgba(200, 232, 245, .38);
	background: linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .1) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
	color: var(--bx-texto);
}

/* Entrada actual: marco cian con halo, como el "Inicio" del mockup. */
.bx .bx-drawer__item--actual > .bx-drawer__enlace,
.bx .bx-drawer__item--actual > .bx-drawer__grupo > .bx-drawer__enlace {
	border-color: rgba(56, 214, 245, .55);
	background: var(--bx-cristal-activo);
	box-shadow:
		inset 0 1px 0 rgba(180, 240, 255, .3),
		0 0 18px rgba(56, 214, 245, .22);
}

.bx-drawer__item--actual .bx-drawer__item-icono,
.bx-drawer__item--actual .bx-drawer__flecha {
	color: var(--bx-accent);
}

/* También dentro de un submenú, donde el texto va más apagado por defecto. */
.bx .bx-drawer__item--actual > .bx-drawer__enlace {
	color: var(--bx-texto);
}

/* Entradas marcadas como destacadas en el admin: en el mockup "Ofertas" va en
   violeta y con la fila teñida. */
.bx .bx-drawer__item--destacado > .bx-drawer__enlace,
.bx .bx-drawer__item--destacado > .bx-drawer__grupo > .bx-drawer__enlace {
	border-color: rgba(196, 164, 255, .26);
	background: linear-gradient(180deg, rgba(139, 92, 246, .24) 0%, rgba(139, 92, 246, .08) 58%, rgba(139, 92, 246, .16) 100%);
	box-shadow: inset 0 1px 0 rgba(216, 196, 255, .26);
	color: #c4a4ff;
}

.bx-drawer__item--destacado .bx-drawer__item-icono {
	color: #c4a4ff;
}

/* Grupos con submenú: el signo gira al desplegar. */
.bx-drawer__signo {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	transition: transform .2s ease;
}

.bx-drawer__signo::before,
.bx-drawer__signo::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 9px;
	height: 1.6px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .6);
}

.bx-drawer__signo::before {
	left: 0;
	transform: rotate(45deg);
}

.bx-drawer__signo::after {
	right: 0;
	transform: rotate(-45deg);
}

.bx-drawer__grupo[open] > .bx-drawer__enlace .bx-drawer__signo {
	transform: rotate(180deg);
}

.bx-drawer__sublista {
	padding: 2px 0 8px 34px;
}

.bx .bx-drawer__sublista .bx-drawer__enlace {
	min-height: 42px;
	font-size: .92rem;
	font-weight: 400;
	color: var(--bx-texto-2);
}

.bx-drawer__sublista .bx-drawer__item + .bx-drawer__item {
	margin-top: 3px;
}

/* --------------------------------------------- 7. Categorías destacadas */

/* Cada tarjeta ocupa un 42 % del carril: caben dos enteras y asoma un trozo
   de la tercera, la pista de que se puede deslizar (doc 11 fase 5.1). Con
   dos categorías o menos no hay nada que asomar y las dos llenan el ancho. */
.bx-drawer__chips {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(42%, 1fr);
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.bx-drawer__chips:has(> li:nth-child(1):nth-last-child(-n+2)) {
	grid-auto-columns: minmax(0, 1fr);
}

.bx-drawer__chips::-webkit-scrollbar {
	display: none;
}

.bx-drawer__chips > li {
	scroll-snap-align: start;
}

/* Más altas que antes, para que la foto respire (doc 11 fase 5.1: "que se
   vea bien la imagen"). La foto va en la fila elástica y el nombre en la de
   abajo: así la imagen se ajusta a lo que queda libre y nunca se sale de la
   tarjeta, ni en el panel ancho de escritorio. */
.bx .bx-drawer__chip {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 8px;
	height: 148px;
	overflow: hidden;
	padding: 10px;
	border: 1px solid var(--bx-cristal-filo);
	border-radius: 14px;
	background: var(--bx-cristal);
	box-shadow: var(--bx-cristal-reflejo);
	color: var(--bx-texto);
	text-align: center;
}

.bx-drawer__chip-icono {
	display: grid;
	place-items: center;
	/* La fila interna se ata a la altura de la celda —minmax(0, 1fr)— y
	   min-height: 0 deja mandar a la fila elástica de la tarjeta: sin las dos
	   cosas la foto impone su altura natural y se sale por abajo. */
	grid-template-rows: minmax(0, 1fr);
	min-height: 0;
	height: 100%;
	overflow: hidden;
	color: var(--bx-gold-claro);
}

/* La foto de la categoría, a todo lo ancho de la tarjeta. Se nombra con
   `img.` para ganar al `height: auto` general de base.css: sin eso la foto
   conserva su altura natural y se sale de la tarjeta. */
.bx img.bx-drawer__chip-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 9px;
	border: 1px solid rgba(140, 180, 200, .3);
}

.bx-drawer__chip-texto {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	align-self: end;
	font-size: .68rem;
	font-weight: 600;
	line-height: 1.2;
	color: rgba(255, 255, 255, .88);
	/* parte solo las palabras que no caben; nunca "Spiderma / n" */
	overflow-wrap: break-word;
	hyphens: manual;
}

.bx .bx-drawer__chip:hover,
.bx .bx-drawer__chip:focus-visible {
	border-color: rgba(56, 214, 245, .5);
	background: var(--bx-cristal-activo);
	box-shadow: var(--bx-cristal-reflejo), 0 0 16px rgba(56, 214, 245, .18);
	color: var(--bx-texto);
}

/* --------------------------------------------- 8. Colecciones destacadas */

/* En el mockup esta fila son cuatro miniaturas casi cuadradas, pero ahí lo
   que se dibujaba eran fotos de producto. Lo que hay de verdad son banners de
   campaña, apaisados de tres a uno: recortados a una miniatura vertical se
   quedaban en un trozo del centro sin nada reconocible. Así que la fila sigue
   siendo la del mockup —horizontal y deslizante— con la tarjeta en su
   proporción, y asomando la siguiente para que se vea que hay más. */
.bx-drawer__colecciones {
	display: grid;
	grid-auto-flow: column;
	/* De lado a lado del panel. Antes cada tarjeta ocupaba el 80 % para que
	   asomara la siguiente, pero con una sola campaña montada —que es lo
	   normal— el banner se quedaba pegado a la izquierda con un hueco al lado.
	   Con el ancho entero, uno solo queda centrado por definición y, cuando hay
	   varios, el deslizamiento con imán los va trayendo de uno en uno. */
	grid-auto-columns: 100%;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0 0 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.bx-drawer__colecciones::-webkit-scrollbar {
	display: none;
}

.bx-drawer__coleccion {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	border: 1px solid var(--bx-cristal-filo);
	border-radius: 10px;
	box-shadow: var(--bx-cristal-reflejo);
	scroll-snap-align: start;
}

/* Sombra al pie para que el nombre se lea sobre cualquier foto. */
.bx-drawer__coleccion::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 62%;
	background: linear-gradient(180deg, transparent 0%, rgba(2, 10, 18, .82) 100%);
}

.bx-drawer__coleccion-nombre {
	position: absolute;
	right: 10px;
	bottom: 8px;
	left: 10px;
	z-index: 1;
	color: var(--bx-texto);
	font-family: var(--bx-display);
	font-size: .84rem;
	line-height: 1.25;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

.bx-drawer__coleccion img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bx-drawer__coleccion:hover,
.bx-drawer__coleccion:focus-visible {
	border-color: rgba(56, 214, 245, .55);
}

/* ---------------------------------------------------------- 9. CTA final */

.bx .bx-drawer__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	/* El CTA se queda pegado al fondo del panel, como en el mockup. */
	margin-top: auto;
	padding: 10px 16px;
	/* Medido en el mockup: cristal oscuro (18,56,76 en el centro) que se
	   ilumina hacia los filos, con el borde en cian vivo y halo alrededor. */
	border: 1px solid #40d3e9;
	border-radius: 14px;
	background: linear-gradient(
		180deg,
		rgba(38, 152, 182, .5) 0%,
		rgba(24, 86, 112, .58) 18%,
		rgba(18, 56, 76, .72) 48%,
		rgba(24, 88, 114, .58) 82%,
		rgba(42, 162, 192, .5) 100%
	);
	color: #ffffff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow:
		0 0 22px rgba(64, 211, 233, .35),
		inset 0 0 18px rgba(64, 211, 233, .1);
}

.bx-drawer__cta .bx-icono {
	color: var(--bx-accent);
}

.bx .bx-drawer__cta:hover,
.bx .bx-drawer__cta:focus-visible {
	color: #ffffff;
	box-shadow:
		0 0 30px rgba(64, 211, 233, .5),
		inset 0 0 22px rgba(64, 211, 233, .16);
}

/* ---------------------------------------- 10. Fuera del móvil y ajustes */

@media (min-width: 992px) {
	.bx-menu-movil {
		display: none;
	}

	/* Salvo cuando está abierto: el dock lo abre también en escritorio, y ahí
	   el menú tiene que verse igual que en móvil. */
	.bx-menu-movil[open] {
		display: block;
	}
}

/* Con el drawer abierto no se desplaza la página de detrás. */
.bx-menu-abierto {
	overflow: hidden;
}

/* El drawer vive dentro de la cabecera, que crea su propio contexto de
   apilado: hay que elevarla o la barra fija de compra (z-index 80) se
   dibujaría por encima del menú. */
.bx-cabecera {
	z-index: 86;
}

/* Y con el menú abierto, la barra de compra se aparta del todo. */
.bx-menu-abierto .bx-barra-movil,
.bx-cabecera:has(.bx-menu-movil[open]) ~ * .bx-barra-movil {
	opacity: 0;
	pointer-events: none;
}

/* Salida: la marca la pone el JavaScript justo antes de cerrar el <details>.
   Sin JavaScript el menú se cierra de golpe, que es un cierre válido. */
.bx-menu-movil--saliendo .bx-drawer {
	animation: bx-drawer-sale .22s ease both;
}

.bx-menu-movil--saliendo .bx-menu-movil__velo {
	animation: bx-velo-entra .22s ease reverse both;
}

@keyframes bx-drawer-sale {
	from { transform: none; opacity: 1; }
	to   { transform: translateX(100%); opacity: .4; }
}

/* Con las partículas disponibles el panel nunca entra deslizándose: nace como
   un punto en su sitio y crece. La marca la pone el propio JavaScript al
   arrancar, así que sin él —o con el movimiento reducido— sigue valiendo la
   entrada de siempre. Tiene que ser una marca permanente y no la del efecto en
   curso: si se quitara al acabar, la animación de deslizar se relanzaría y el
   panel se saldría de la pantalla justo al terminar. */
.bx-menu-movil--magico .bx-drawer {
	animation: none;
}

/* Nace desde su propio centro, que es donde va a quedarse. */
.bx-menu-movil--magico.bx-menu-movil--naciendo .bx-drawer {
	animation: bx-panel-nace .72s cubic-bezier(.34, .04, .18, 1) both;
}

.bx-menu-movil--magico.bx-menu-movil--muriendo .bx-drawer {
	animation: bx-panel-muere .34s ease-in both;
}

/* El velo entra pronto: si el fondo sigue encendido, las partículas se
   pierden sobre la página iluminada. */
.bx-menu-movil--naciendo .bx-menu-movil__velo {
	animation: bx-velo-entra .26s ease both;
}

.bx-menu-movil--muriendo .bx-menu-movil__velo {
	animation: bx-velo-entra .24s ease reverse both;
}

/* El aspa llega con el panel, no antes. */
.bx-menu-movil--naciendo > .bx-menu-movil__disparador {
	animation: bx-aspa-llega .5s ease both;
}

.bx-menu-movil--muriendo > .bx-menu-movil__disparador {
	animation: bx-aspa-llega .24s ease reverse both;
}
@keyframes bx-aspa-llega {
	0%   { opacity: 0; transform: scale(.6); }
	55%  { opacity: 0; transform: scale(.85); }
	100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bx-drawer,
	.bx-menu-movil__velo {
		animation: none;
	}
}