/**
 * BAMZE Cotizacion - estilos del drawer lateral y el boton flotante (drawer.js).
 * Paleta: navy #01116E.
 *
 * FLUJO VISUAL (medido en el sitio): la esquina inferior derecha es el riel de
 * accion. La burbuja de WhatsApp (wa__btn_popup, z-index 999999999, 56px, right 46
 * bottom 29) y el boton "subir" de Porto (#topcontrol) ya viven ahi. El carrito se
 * apila ENCIMA de la burbuja (mismo eje, centros alineados) y el drawer usa un
 * z-index superior al de la burbuja para que el overlay la cubra al abrirse.
 */

/* Boton flotante: apilado sobre la burbuja de WhatsApp, mismo eje vertical.
   Re-medido el 03-ago-2026 tras actualizar el plugin de WhatsApp: la burbuja
   ahora vive en right 30 con 56 px de ancho (centro a 58 px del borde) en
   TODOS los anchos; right 32 + 52 px dan el mismo centro 58. */
.bc-fab {
	position: fixed;
	right: 32px;
	bottom: 100px;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	background: #01116E;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(1, 17, 110, .35);
	transition: transform .15s, box-shadow .15s;
	z-index: 999999997;
}
.bc-fab:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(1, 17, 110, .45);
}
.bc-fab .bc-badge-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #C0392B;
}

/* Overlay: por ENCIMA de la burbuja de WhatsApp para cubrirla mientras el drawer
   esta abierto (asi nada se superpone a los botones del pie). */
.bc-ovl {
	position: fixed;
	inset: 0;
	background: rgba(15, 18, 30, .45);
	opacity: 0;
	transition: opacity .2s;
	z-index: 1000000000;
}
.bc-ovl--visible { opacity: 1; }

/* Panel lateral */
.bc-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(380px, 92vw);
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .22s ease-out;
	box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
	z-index: 1000000005;
}
.bc-drawer--abierto { transform: translateX(0); }
/* Solo la fila en proceso se atenua; el panel se mantiene opaco (atenuar el panel
   completo lo volvia semitransparente y parecia congelado). */
.bc-drawer__item--procesando { opacity: .5; pointer-events: none; }

.bc-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 2px solid #01116E;
}
.bc-drawer__titulo { margin: 0; font-size: 1.05em; color: #01116E; }
.bc-drawer__cerrar {
	border: 0;
	background: none;
	color: #C0392B;
	cursor: pointer;
	font-size: .9em;
	text-decoration: underline;
}

.bc-drawer__cuerpo { flex: 1; overflow-y: auto; padding: 12px 18px; }

.bc-drawer__item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid #ececec;
}
.bc-drawer__item img { border-radius: 4px; object-fit: cover; flex: 0 0 auto; }
.bc-drawer__info { flex: 1; min-width: 0; }
.bc-drawer__nombre {
	display: block;
	font-weight: 600;
	font-size: .92em;
	line-height: 1.3;
	margin-bottom: 6px;
}
.bc-drawer__controles { display: flex; align-items: center; gap: 6px; }
.bc-drawer__menos,
.bc-drawer__mas {
	width: 26px;
	height: 26px;
	border: 1px solid #ccc;
	background: #f7f7f7;
	border-radius: 4px;
	cursor: pointer;
	line-height: 1;
	font-size: 15px;
}
.bc-drawer__qty { width: 54px; padding: 3px 4px; text-align: center; }
.bc-drawer__quitar { color: #C0392B; font-size: .85em; text-decoration: underline; margin-left: 6px; }
.bc-drawer__nota { font-size: .8em; color: #777; margin-top: 12px; }
.bc-drawer__cargando { padding: 18px 4px; color: #666; font-size: .9em; }

.bc-drawer__vacio { padding: 26px 4px; text-align: center; }
.bc-drawer__vacio .bc-drawer__ir-tienda,
.bc-drawer__pie .bc-drawer__enviar {
	background: #01116E !important;
	color: #fff !important;
	display: block;
	text-align: center;
}

.bc-drawer__pie {
	padding: 14px 18px;
	border-top: 1px solid #ececec;
	display: grid;
	gap: 8px;
}
.bc-drawer__seguir {
	border: 1px solid #01116E;
	background: #fff;
	color: #01116E;
	padding: 9px 12px;
	border-radius: 3px;
	cursor: pointer;
}

/* --- Telefono: los controles se manejan con el dedo, no con el puntero. Los
   pasos de cantidad median 26 px y quitar 33x22. Ademas la burbuja de WhatsApp
   se recoloca a right 30 en pantallas chicas, asi que el riel se realinea con
   ella para que ambos centros coincidan. --- */

@media (max-width: 767px) {
	.bc-fab {
		right: 30px;
		width: 56px;
		height: 56px;
	}

	.bc-drawer__cerrar {
		padding: 10px 2px;
		font-size: 1em;
	}

	.bc-drawer__menos,
	.bc-drawer__mas {
		width: 44px;
		height: 44px;
		font-size: 18px;
	}

	.bc-drawer__qty {
		width: 56px;
		padding: 10px 4px;
		font-size: 15px;
	}

	.bc-drawer__quitar {
		display: inline-block;
		padding: 11px 6px;
	}

	.bc-drawer__seguir,
	.bc-drawer__pie .bc-drawer__enviar,
	.bc-drawer__vacio .bc-drawer__ir-tienda {
		min-height: 44px;
		padding: 12px 14px;
	}
}